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.

What do you currently have as your javascript? It's hard to troubleshoot based on HTML alone. — Toby, Jul 24 '16 at 15:35
Let's say I have a button in my accordion3, onClick of that button I call a function which disables the first two accordions, accordion1 and accordion2. — nitte93, Jul 24 '16 at 15:50
I meant add your relevant JS to your question - you'll be much more likely to get answers if you demonstrate your attempts and show what code has worked and what has not. — Toby, Jul 24 '16 at 15:51
@QuỳnhNguyễn where is your source dude? I can't see your post, how can I vote down? — nitte93, Jul 24 '16 at 16:47

score 2 · Accepted Answer · answered Jul 24 '16 at 16:39

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>

Thanks for the answer, I liked your approach. Your answer is not exactly what I needed, I thought there is a more general approach do this, I want this disabling action in so many places, Like, only when the form in 1st accordion is valid make the other two expandable else disabled. Clicking on the first two should not be compressing my already opened 3rd accordion.. But I liked your approach, your approach gave me an idea to circumvent in my situation. I think I can use it to fix my problem. Once again thanks for the response. — nitte93, Jul 24 '16 at 17:08
Hi @Zakaria Acharki. Can you tell me how to put that toggled accordion listener inside my react component? — nitte93, Jul 24 '16 at 18:47
I'm doing `$('.accordion').addEventListener('toggled', function(event, accordion){ console.log('hi'); });` but that is not working, Also, how do I add the disabled class to my components upon componen mount. — nitte93, Jul 24 '16 at 18:51
Hi man, sorry but i'm not a react developper (unfortunately).. you could post new question tagged with react for thsi specific need.. — Zakaria Acharki, Jul 25 '16 at 09:12

Arnoud Sietsema · Answer 2 · 2016-08-26T07:39:50.583

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.

Disable clickability on foundation accordion

2 Answers2