Simple jQuery Accordion

by Nikola Vidović

HTML

<div class="menu">
  <p>Menu 1</p>
  <ul class="content">
    <li>A</li>
    <li>B</li>
  </ul>
</div>
<div class="menu">
  <p>Menu 2</p>
  <ul class="content">
    <li>A</li>
    <li>B</li>
  </ul>
</div>
<div class="menu">
  <p>Menu 3</p>
  <div class="content">
    <li>A</li>
    <li>B</li>
  </ul>
</div>

CSS

body {
  font-family: Arial, Helvetica, sans-serif;
}

p {
  background-color: #F60;
  border-bottom: 1px solid #FFFFFF;
  cursor: pointer;
  padding: 10px;
  color: #FFFFFF;
  margin: 0;
}

ul {
  background-color: #EFEFEF;
  display: none;
  margin: 0;
}

JavaScript

$('.menu').on('click', function() {
  $('.content').hide();
  $(this).find('.content').show();
});