Basic jQuery Accordion -- Allows user to click twice on the same accordion, which will result in closing the select panel

basic-jquery-accordion

//
// jQuery
//

;(function (window, document, $) {
  // target all panels
  var allPanels = $('div.main-links > div.collapse > ul');

  $('a.toggle').on('click', function (e) {
    e.preventDefault();
    allPanels.slideUp(); // force all panels to close
    
    // if the panel selected is hidden, slide it down
    if( $(this).next('ul').is(":hidden") ) {
      $(this).next('ul').slideDown();
    }
  });

}(this, document, jQuery));

//
// HTML
//

<div class="main-links">
    <div class="collapse">
        <a class="toggle" href="#">Products</a>
        <ul>
            <li>Example 1</li>
            <li>Example 2</li>
            <li>Example 3</li>
        </ul>
    </div>
    <div class="collapse">
        <a class="toggle" href="#">Products</a>
        <ul>
            <li>Example 1</li>
            <li>Example 2</li>
            <li>Example 3</li>
        </ul>
    </div>
    <div class="collapse">
        <a class="toggle" href="#">Products</a>
        <ul>
            <li>Example 1</li>
            <li>Example 2</li>
            <li>Example 3</li>
        </ul>
    </div>
    <div class="collapse">
        <a class="toggle" href="#">Products</a>
        <ul>
            <li>Example 1</li>
            <li>Example 2</li>
            <li>Example 3</li>
        </ul>
    </div>
</div>