JSFiddle - React, Tailwind, and code Playground

by bridget_kilgallon

HTML

<body>
    <div class="container">
        <div class="project" id="munchcraft">
            <p>munchcraft 
                <a id="open-munchcraft">open</a>
                <a id="close-munchcraft" class="hide">close</a>
            </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 #close-munchcraft.hide,
body #open-munchcraft.hide,
body .project.hide {
    display: none;
}

JavaScript

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


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