JSFiddle - React, Tailwind, and code Playground

by Carin Camen

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
    <p>Click the small black box to show the large rectangle box.</p>

<img class="arrow"> 
                     
<div class="gallery"</div>

CSS

.gallery {
    position: relative;
    width: 620px;
    height: 215px;
    top: 30px;
    left: 50px;
    background-color: rgb(0,0,0);
}

.arrow{
    position: relative;
    width:20px;
    height: 20px;
    top: 15px;
    left: 340px;
    background-color: rgb(0,0,0);
}

JavaScript

$(document).ready(function(){
    var display =$('.gallery');
    $(display).hide();
    $('.arrow').click(function(){
        $(display).toggle();
        e.preventDefault();
    });
});