Disable clickability on foundation accordion

Question

I have a foundation accordion something like this.

<ul class="accordion" data-accordion>
  <li class="accordion-navigation">
    <a href="#panel1a">Accordion 1</a>
    <div id="panel1a" class="content active">
      Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#panel2a">Accordion 2</a>
    <div id="panel2a" class="content">
      Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#panel3a">Accordion 3</a>
    <div id="panel3a" class="content">
      Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
</ul>

I have a couple of forms in accordion1 and accordion2. Once the forms are filled and validated. I move on to step 3. At this point I want to disable the clickability on accordion1 and accordion2. They should be no longer expandable.

Now I tried removing a couple of classes and removing their id's. But that is not working. Is there any way I can disable them from expanding. The foundation accordion doc does not specify how to attain this.

To expand and compress the accorions on click of a button, I do something like this:

var parent = document.getElementById('collapse3').parentElement;
var parentFoo = new Foundation.Accordion($(parent));
var previousFoo = new Foundation.Accordion($(parent.previousSibling));
parentFoo.down($('#'+parent.children[1].id));
previousFoo.up($('#'+parent.previousSibling.children[1].id));

Now is there any way I can disable an accordion on click of a button. I tried removing the corresponding <a> element from the dom, but that removes the entire accordion.

Answer 1

I would also like to be able to disable accordion items, but was not able to find an official way to do this. With a simple edit of the foundation library (I know it's not ideal...) however I was able to make this work.

I'm using this solution in combination with AngularJS, which requires the disabled check to take place on each user interaction instead of on init.

The first step is to add the css class 'disabled' to the li.accordion-item's that need to be disabled.

<ul class="accordion" data-accordion="true" role="tablist">
    <li class="accordion-item disabled">
        <!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. -->
        <a href="#panel7d" role="tab" class="accordion-title" id="panel7d-heading" aria-controls="panel7d">Panel title</a>
        <!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. -->
        <div id="panel7d" class="accordion-content" role="tabpanel" data-tab-content="true" aria-labelledby="panel7d-heading">
            <!-- tab content -->
        </div>
    </li>
</ul>

Then a simple modification of the foundation.js library is sufficient to disable the carrousel item.

_createClass(Accordion, [
    // Other functions
    {
        key : 'down',
        value : function down($target, firstTime) {
            var _this2 = this;

            // ADD THIS CHECK TO BE ABLE TO DISABLE THE ACCORDION ITEM
            // Check if the parent accordion-item is disabled. If so, return from this function.
            if ($target.parent().hasClass('disabled')) {
                return;
            }

            // The rest of the function body
        }
    }
    // Other functions
])

Disclaimer: In my setup the user is not able to toggle the accordion 'up' or control the accordion with keys. If your solution does, than you might need to add this check in some other sections of the foundation library as well.

Answer 2

Working fiddle

You have just to add a class to identify the steps you want to disable, in my example I'll add disabled class :

$(document).foundation('accordion');

$('body').on('click', '#disable-steps', function(){
  $('.step-1,.step-2').addClass('disabled');
})

$('.accordion').on('toggled', function (event, accordion) {
  if(accordion.parents('li').hasClass('disabled'))
    accordion.removeClass('active');
});

Hope this helps.

$(document).foundation('accordion');

$('body').on('click', '#disable-steps', function(){
  $('.step-1,.step-2').addClass('disabled');
})

$('.accordion').on('toggled', function (event, accordion) {
  if(accordion.parents('li').hasClass('disabled'))
    accordion.removeClass('active');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation/foundation.accordion.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css" rel="stylesheet"/>

<ul class="accordion" data-accordion="myAccordionGroup">
  <li class="accordion-navigation step-1">
    <a href="#panel1c">Step 1</a>
    <div id="panel1c" class="content">
      Panel 1. Lorem ipsum dolor
    </div>
  </li>
  <li class="accordion-navigation step-2">
    <a href="#panel2c">Step 2</a>
    <div id="panel2c" class="content">
      Panel 2. Lorem ipsum dolor
    </div>
  </li>
  <li class="accordion-navigation step-3">
    <a href="#panel3c">Step 3</a>
    <div id="panel3c" class="content">
      Panel 3. 
      <br>
      <button type='button' id='disable-steps'>Disable steps 1 & 2</button> 
    </div>
  </li>
</ul>