CodePen

HTML

            
              <ul>
  <li>
    <h1>Some Title #1</h1>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </li>
  <li>
    <h1>Some Title #2</h1>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </li>
</ul>
            
          
!

CSS

            
              ul {
  list-style: none;
  margin: 0 40px;
  padding: 0;
  
  li {
    float: left;
    width: 300px;
  }
  
  h1 {
    cursor: pointer;
  }
  
  p {
    display: none;
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('h1').on('click', function() {
  var $this = $(this),
      $next = $this.next();
  
  // Check if another profile is open and close it
  var $last = $('p:visible', $this.parents('ul'));
  
  if ($last.length) {
    $last.slideUp('fast');
  }
  
  // Show the new profile content only if we are opening a
  // new profile
  if ($last.parents('li').index() !== $this.parent().index()) {
    $next.slideDown('fast');
  }
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................