• Geek Answers Handbook

    Disable accordion click-through

    I have a stock accordion, something like this. enter image description here

    <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 several forms in accordion1 and accordion2. As soon as forms are filled and verified. I go to step 3. At this point, I want to disable clickability on accordion1 and accordion2. They should not expand.

    Now I tried to remove a couple of classes and remove their identifiers. But that does not work. Is there any way to disconnect them from the extension. The doc founding accordion does not indicate how to achieve this.

    To expand and compress accorions with the 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 I can disconnect the accordion with the click of a button. I tried to remove the corresponding <a> element from dom, but this will remove the entire accordion.

    +5
    source share
    2 answers

    Working violin

    You need to add a class to determine the steps you want to disable, in my example I will add a 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>
    +2
    source

    I would also like to disable the elements of the accordion, but could not find an official way to do this. With a simple editing of the foundation library (I know this is not perfect ...), however I was able to do the job.

    I use this solution in conjunction with AngularJS, which requires that a failure check be performed each time a user interacts, not in init.

    The first step is to add the css class 'disabled' to the li.accordion element that you want to disable.

     <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 enough to disable the carousel element.

     _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 cannot switch the accordion up or control the accordion keys. If your solution is valid, you may need to add this check to some other sections of the fund library.

    0
    source

    More articles:


    All Articles