adventure time

<html>
<head>
  <title>Adventure Time</title>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
  <style type="text/css">

  #wrapper { width: 1200px; }

  ul { list-style: none; }

  li { float: left; margin: 5%; width: 15%;}

  img { height: 50px; width: 50px; }

  .desc1, .desc2, .desc3, .desc4 { margin: 0 25% 0 25%; padding: 0;}

  </style>
</head>


<body>
<div id="wrapper">
  <ul>
    <li><img class="first" src="example.jpg" alt=""></li>
    <li><img class="second" src="example.jpg" alt=""></li>
    <li><img class="third" src="example.jpg" alt=""></li>
    <li><img class="fourth" src="example.jpg" alt=""></li>
  </ul>
  <div class="desc1" style="display:none">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia odit voluptatem, nesciunt nobis laborum consequatur obcaecati delectus, optio consequuntur ipsam assumenda maxime rerum aliquid ducimus, adipisci. Qui dolore odio quod.</p>
  </div>
  <div class="desc2" style="display:none">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia odit voluptatem, nesciunt nobis laborum consequatur obcaecati delectus, optio consequuntur ipsam assumenda maxime rerum aliquid ducimus, adipisci. Qui dolore odio quod.</p>
  </div>
  <div class="desc3" style="display:none">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia odit voluptatem, nesciunt nobis laborum consequatur obcaecati delectus, optio consequuntur ipsam assumenda maxime rerum aliquid ducimus, adipisci. Qui dolore odio quod.</p>
  </div>
  <div class="desc4" style="display:none">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia odit voluptatem, nesciunt nobis laborum consequatur obcaecati delectus, optio consequuntur ipsam assumenda maxime rerum aliquid ducimus, adipisci. Qui dolore odio quod.</p>
  </div>
</div>

  <script>
    $( ".first" ).click(function() {
      $( ".desc1" ).toggle( 1 );
      $( ".desc2" ).hide();
      $( ".desc3" ).hide();
      $( ".desc4" ).hide();
    });
    $( ".second" ).click(function() {
      $( ".desc2" ).toggle( 1 );
      $( ".desc1" ).hide();
      $( ".desc3" ).hide();
      $( ".desc4" ).hide();
    });
    $( ".third" ).click(function() {
      $( ".desc3" ).toggle( 1 );
      $( ".desc1" ).hide();
      $( ".desc2" ).hide();
      $( ".desc4" ).hide();
    });
    $( ".fourth" ).click(function() {
      $( ".desc4" ).toggle( 1 );
      $( ".desc1" ).hide();
      $( ".desc2" ).hide();
      $( ".desc3" ).hide();
    });
  </script>
</body>
</html>