Semantic UI accordion behaviors not working

Question

I'm trying to utilize the semantic ui accordion behavior to open and close accordions based on a button click, however this is not functioning as I would expect.

From the documentation:

$('.ui.accordion').accordion('behavior', argumentOne, argumentTwo...);

I am attempting to utilize the toggle (index) behavior. My expectation is

$('.ui.accordion').accordion('toggle', 1);

Would open the accordion at index 1 on the page and close the others, but adding that behavior event to a click event on a button does not toggle any accordion.

CodePen of the issue here https://codepen.io/jasonyost/pen/ZxOvPW

Answer 1

It's zero 0 based, which means for the first level of the accordions your code would be:

$('.ui.accordion').accordion('toggle', 0);

Answer 2

This is because you are defining a new accordion every time take a look at this code which works.

<div class="ui accordion">
  <div class="active title">
    <i class="dropdown icon"></i> Index 0
  </div>
  <div class="active content">
  <p>Index 0 shown</p>
  </div>
  <div class="title">
    <i class="dropdown icon"></i> Index 1
  </div>
  <div class="content">
    <p>Index 1 shown</p>
  </div>
  <div class="title">
    <i class="dropdown icon"></i> Index 2
  </div>
  <div class="content">
    <p>Index 2 shown</p>
  </div>
</div>

<button class="ui button toggle">
  Toggle
</button>

https://jsfiddle.net/d2s8nhw3/