JSFiddle - React, Tailwind, and code Playground

by Travis Harris

HTML

<div class="content">
  <div class="frame">
    <div class="image">
      <img src="http://www.sowhowins.com/Character%20Pictures/He-Man2.png" alt="Test" />
      <div class="information">
        This is He-man
      </div>
    </div>


  </div>
  <div class="frame">
    <div class="image">
      <img src="http://images.amazon.com/images/G/01/dvd/aplus/transformers/transformers8-hi.jpg" alt="Test" />
    </div>
    <div class="information">
      This is He-man
    </div>

  </div>
  <div class="frame">
    <div class="image">
      <img src="http://images6.fanpop.com/image/photos/36900000/Bumblebee-the-transformers-36906761-1000-1286.jpg" alt="Test" />
    </div>
    <div class="information">
      This is He-man
    </div>

  </div>
  <div class="frame">
    <div class="image">
      <img src="http://media.popcultcha.com.au/media/catalog/product/s/i/sid26121.png" alt="Test" />
    </div>
    <div class="information">
      This is He-man
    </div>

  </div>
  <div class="frame">
    <div class="image">
      <img src="https://www.sideshowtoy.com/wp-content/uploads/2013/07/1000041-product-silo.png" alt="Test" />
    </div>
    <div class="information">
      This is He-man
    </div>
  </div>
</div>

CSS

.content {
  width: 100%;
  margin: 0;
  top: 0;
}
.frame {
  width: 20%;
  float: left;
  overflow: hidden;
}
.frame.expanded{
    width:100%;
}
.information {
  float: right;
  display:none;
}
.frame.expanded .information{
    display:block;
}
.image {
  border: 1px;
}

JavaScript

$(function() {
    $(".frame").on("click", function() {
        if ($(this).hasClass("expanded")){
            $(".frame").show();
            $(this).removeClass("expanded");
        } else {
            $(".frame").hide();
            $(this).show()
            $(this).addClass("expanded");
        }
    });
});