JSFiddle - React, Tailwind, and code Playground

by bridget_kilgallon

HTML

<body>
    <div class="container">
        <div class="project" id="munchcraft">
            <p>munchcraft 
                <a class="open">open</a>
                <a class="close hide">close</a>
                <div id="content">
            </p>
        </div>
        <div class="project" id="novelade"><p>novelade</p></div>
        <div class="project" id="stone"><p>stone</p></div>
        <div class="project" id="surfis"><p>surfis</p></div>
        <div class="project" id="arcteryx"><p>arcteryx</p></div>
    </div>
</body>

CSS

.container {
    height: 300px;
    width: 450px;
    margin: 0;
    padding: 0;
    border: 1px dashed black;
    display: table;
}

.project {
    height: 100%;
    width: 100px;
    border: 1px solid black;
    background-color: white;
    display: table-cell;
}

.project:hover {
    width: 40%;
}

.project.open p {
    opacity: 1;
}

p {
    opacity: 0;
}

.project:hover p {
    opacity: 1;
}

body .project.open {
    width: 100%;
}

body #munchcraft a.close.hide,
body #munchcraft a.open.hide,
body .project.hide {
    display: none;
}

JavaScript

$('#munchcraft a.open').click(function() {
    $('body #munchcraft a.close').removeClass("hide");
    $('body #munchcraft a.open').addClass("hide");
    $('body #munchcraft').addClass("open");
    $('body #novelade').addClass("hide");
    $('body #stone').addClass("hide");
    $('body #surfis').addClass("hide");
    $('body #arcteryx').addClass("hide");
});


$('#munchcraft a.close').click(function() {
    $('body #munchcraft a.close').addClass("hide");
    $('body #munchcraft a.open').removeClass("hide");
    $('body #munchcraft').removeClass("open");
    $('body #novelade').removeClass("hide");
    $('body #stone').removeClass("hide");
    $('body #surfis').removeClass("hide");
    $('body #arcteryx').removeClass("hide");
});