Dropdown list

by Marc Cots Navarro

HTML

<ul>
  <li>
    <div class="btn">
      Log in <span>&#x25BC;</span>
    </div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
    </div>                     
  </li>
  <li>
    <div class="btn">
      Log in <span>&#x25BC;</span>
    </div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
    </div>                     
  </li>
  <li>
    <div class="btn">
      Log in <span>&#x25BC;</span>
    </div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
    </div>                     
  </li>
  <li>
    <div class="btn">
      Log in <span>&#x25BC;</span>
    </div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
    </div>                     
  </li>
  <li>
    <div class="btn">
      Log in <span>&#x25BC;</span>
    </div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium...

CSS

li {
  width: 200px;
  display: inline-table;
}

.btn {
  background: black;
  color: white;
  padding: 10px 20px;
}
.content {
  display: none;
  background: #f5f5f5;
  padding: 20px;
}

JavaScript

$(document).ready(function(){
    $('.btn').click(function() {
        $(this).next('.content').slideToggle();
        $(this).toggleClass('active');                    
        
        if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
            else $(this).find('span').html('&#x25BC;')
        })
});