accordion

collapse and expand tabs jquery / simple accordion

by

I have two different methods for simple accordion; 1st with close button, 2nd is with hover trigger. 1) Here is JsFiddle example with close button: jQuery: $(‘.content’).slideUp(400);//reset panels $(‘.panel’).click(function() {//open var takeID = $(this).attr(‘id’);//takes id from clicked ele $(‘#’+takeID+’C’).slideDown(400); //show’s clicked ele’s id macthed div = 1second }); $(‘span’).click(function() {//close var takeID = $(this).attr(‘id’).replace(‘Close’,”); //strip … Read more

Bootstrap accordion, scroll to top of active (open) accordion on click?

by

You can animate the scroll by getting the top of the ‘target element’ and then calling animate on the body.. $(‘html, body’).animate({ scrollTop: $(“#target-element”).offset().top }, 1000); modifying it to be something like this will help you achieve what you are after $(‘.panel-collapse’).on(‘shown.bs.collapse’, function (e) { var $panel = $(this).closest(‘.panel’); $(‘html,body’).animate({ scrollTop: $panel.offset().top }, 500); }); … Read more

How do you make Twitter Bootstrap Accordion keep one group open?

by

Here is an easy way to do it: Bootstrap 4 $(‘.accordion .btn-link’).on(‘click’, function(e) { if (!$(this).hasClass(‘collapsed’)) { e.stopPropagation(); } }); from @mr_joncollette in the comments Bootstrap 3 JsFiddle for Bootstrap 3. Code for Bootstrap 3: $(‘.panel-heading a’).on(‘click’,function(e){ if($(this).parents(‘.panel’).children(‘.panel-collapse’).hasClass(‘in’)){ e.stopPropagation(); } // You can also add preventDefault to remove the anchor behavior that makes // the … Read more

jQuery UI Accordion Expand/Collapse All

by

As discussed in the jQuery UI forums, you should not use accordions for this. If you want something that looks and acts like an accordion, that is fine. Use their classes to style them, and implement whatever functionality you need. Then adding a button to open or close them all is pretty straightforward. Example HTML … Read more

Bootstrap Accordion button toggle “data-parent” not working

by

Bootstrap 4 Use the data-parent=”” attribute on the collapse element (instead of the trigger element) <div id=”accordion”> <div class=”card”> <div class=”card-header”> <h5> <button class=”btn btn-link” data-toggle=”collapse” data-target=”#collapseOne”> Collapsible #1 trigger </button> </h5> </div> <div id=”collapseOne” class=”collapse show” data-parent=”#accordion”> <div class=”card-body”> Collapsible #1 element </div> </div> </div> … (more cards/collapsibles inside #accordion parent) </div> Bootstrap 3 … Read more

jQuery & Prototype Conflict

by

There are two possible solutions: There was a conflict with an older version of Scriptaculous and jQuery (Scriptaculous was attempting to extend the native Array prototype incorrectly) – first try upgrading your copy of Scriptaculous. If that does not work you will need to use noConflict() (as alluded to above). However, there’s a catch. Since … Read more