JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="moreinfo">
  <a href="#" id="closegall">x</a>
  <div id="details"></div>
</div>

<div class="row">
  <div class="col-md-6">

    <div class="portfoliotile">
      <img src="http://dummyimage.com/140/a3a3a3/ff0048.png" alt="thumb" class="trigger" />
      <div class="description">
        <h3>Title</h3>
        <p>Project decription goes right here.
          <p>
      </div>
    </div>

    <div class="portfoliotile">
      <img src="http://dummyimage.com/140/a3a3a3/ff0048.png" alt="thumb" class="trigger" />
      <div class="description">
        <h3>Title</h3>
        <p>Loremipsum dolor sit amet consequtur</p>
      </div>
    </div>

  </div>

</div>

CSS

.hidden {
  visibility: hidden;
  display: none;
}

.portfoliotile {
  border: 1px solid black;
  padding: 4px;
  margin: 20px;
  background-color: red;
  text-align: center;
}

#moreinfo {
  border: 1px solid black;
  padding: 4px;
  margin: 0 auto 20px auto;
  background-color: yellow;
  text-align: center;
}

.active {
  opacity: 0.6;
}

JavaScript

$(document).ready(function() {

  $('body').click(function() {
    $('#moreinfo').addClass('hidden');
    $('.trigger').parent().removeClass('active');
  });

  $('#moreinfo').addClass('hidden');
  $('.portfoliotile .description').addClass('hidden');

  $('.trigger').click(function(e) {
    e.stopPropagation();

    $('.portfoliotile').removeClass('active')
    $('#moreinfo').removeClass('hidden');
    $(this).parent().addClass('active');
    $('#details').html($(this).parent().find('.description').html());

  });

  $('#closegall').click(function() {
    $('#moreinfo').addClass('hidden');
    $('.portfoliotile').removeClass('dark');
  });


});