JSFiddle - React, Tailwind, and code Playground

by boushley

HTML

<div>
  <p id="show1">Show 1</p>
  <p id="show2">Show 2</p>
  <p id="fadeOut1">Fade out 1</p>
  <p id="fadeOut2">Fade out 2</p>
</div>
<div style="width:550px; height:350px; border:1px solid #666;">
  <div id="par1" >
    <div class="photo">a</div>
    <div class="photo">b</div>
    <div class="photo">c</div>
    <div class="photo">d</div>
    <div class="photo">e</div>
  </div>
  <div id="par2">
    <div class="photo2">a</div>
    <div class="photo2">b</div>
    <div class="photo2">c</div>
    <div class="photo2">d</div>
    <div class="photo2">e</div>
  </div>
</div>

CSS

img 
{
    padding:0 5px 10px 0;
}
.photo {
    display: inline;
    float:left;
    width:160px;
    height: 160px;
    margin: 10px;
    background-color: blue;
}

#par2 {
    display: none;
}

.photo2 {
    display: inline;
    width:160px;
    height: 160px;
    margin: 10px;
    background-color: red;
}

JavaScript

$('#show1').click(function () {
    $('#par1').show();
});
$('#show2').click(function () {
    $('#par2').show();
});

$('#fadeOut1').click(function () {
    $('#par1').fadeOut('slow');
});
$('#fadeOut2').click(function () {
    $('#par2').fadeOut('slow');
});