Simple jQuery Accordion

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>
  <ul 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();
  console.log(this);
});
*/

// on a traduit ce code depuis le composant http://ejghkejghkgjehgk

var menus = document.getElementsByClassName('menu');
for (var i = 0; i<menus.length; i++) {
  console.log(i, menus[i]);
  menus[i].onclick = function(event) {
    var contents = document.getElementsByClassName('content');
    for (var j = 0; j<contents.length; j++) {
			contents[j].style.display = 'none';  
    }
    //console.log('click', event.currentTarget);
    event.currentTarget.children[1].style.display = 'block';
  };
}