jenhuls
4/29/2017 - 1:38 PM

Trigger Foundation Accordion toggle on page load in WordPress when accordion panels are created dynamically and you have more than one accor

Trigger Foundation Accordion toggle on page load in WordPress when accordion panels are created dynamically and you have more than one accordion on page.

toggle-accordion-page-load-wordpress.php
content_copyfile_download
/* http://foundation.zurb.com/forum/posts/36914-605---how-to-trigger-accordion-toggle */

<ul id="foobar" class="accordion" data-accordion >
  <li class="accordion-item">
    <a href="#item1" class="accordion-title" id="item1-heading">Make me active</a>
    <div id="item1" class="accordion-content" data-tab-content
      aria-labelledby="item1-heading">
      Item 1. Lorem ipsum dolor
    </div>
  </li>
  ...
</ul>
<script>
  // make item1 active if not currently
  if (!$("#item1").parent(".is-active").length) {
    $("#foobar").foundation('down',$("#item1"));
  }
  // to toggle item 1
  $("#foobar").foundation('toggle',$("#item1"));
  // if accordion no id
  $("#item1").parent().parent().foundation('toggle',$("#item1"));
</script>