Gold Pearl Gold Pearl - 4 months ago 14
HTML Question

Multiple Accordion in single page

I'm trying to use two or more accordion in same page. So right now the first accordion is working however the second doesn't work.

I was wondering missed multiple event.

Here is my html and js code. Any help highly appreciated.



$('#accord > ul > li:has(ul)').addClass("has-sub");

$('#accord > ul > li > a').click(function() {
var checkElement = $(this).next();

$('#accord li').removeClass('active');
$(this).closest('li').addClass('active');

if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}

if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#accord ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}

if (checkElement.is('ul')) {
return false;
} else {
return true;
}
});

<div id='accord'>
<ul>
<li class="active">
<a href='javascript:void(0)'><span>Accordion</span></a>
<ul style="display: block;">
<div class="acc_cont">
//text
</div>
</ul>
</li>
<li>
<a href='javascript:void(0)'><span>Accordion</span></a>
<ul style="display: block;">
<div class="acc_cont">
//text
</div>
</ul>
</li>
</ul>
</div>

<div id='accord'>
<ul>
<li class="active">
<a href='javascript:void(0)'><span>Accordion</span></a>
<ul style="display: block;">
<div class="acc_cont">
//text
</div>
</ul>
</li>
<li>
<a href='javascript:void(0)'><span>Accordion</span></a>
<ul style="display: block;">
<div class="acc_cont">
//text
</div>
</ul>
</li>
</ul>
</div>




Answer

Your HTML is invalid because of the duplicate id attributes. They must be unique within a document. Use classes instead. Also note that you should reference all elements within the current accordion through DOM traversal methods to stop any events raised in one accordion from affecting any other instance on the page. Try this:

$('.accord > ul > li:has(ul)').addClass("has-sub");

$('.accord > ul > li > a').click(function() {
  var $accordion = $(this);
  var checkElement = $(this).next();

  $accordion.find('li').removeClass('active');
  $accordion.closest('li').addClass('active');

  if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $accordion.closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }

  if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $accordion.find('ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }

  if (checkElement.is('ul')) {
    return false;
  } else {
    return true;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='accord'>
  <ul>
    <li class="active">
      <a href='javascript:void(0)'><span>Accordion</span></a>
      <ul style="display: block;">
        <div class="acc_cont">
          //text
        </div>
      </ul>
    </li>
    <li>
      <a href='javascript:void(0)'><span>Accordion</span></a>
      <ul style="display: block;">
        <div class="acc_cont">
          //text
        </div>
      </ul>
    </li>
  </ul>
</div>

<div class='accord'>
  <ul>
    <li class="active">
      <a href='javascript:void(0)'><span>Accordion</span></a>
      <ul style="display: block;">
        <div class="acc_cont">
          //text
        </div>
      </ul>
    </li>
    <li>
      <a href='javascript:void(0)'><span>Accordion</span></a>
      <ul style="display: block;">
        <div class="acc_cont">
          //text
        </div>
      </ul>
    </li>
  </ul>
</div>

Comments