Question

I am using the latest version of Zurb’s Foundation prototyping framework. It isn’t entirely necessary that you have any experience with this specific product though it helps for context.

One of the tools included in the framework is the JQuery accordion – however they have made some custom style modifications. One of the issues this appears to have created is that whenever you click ANYWHERE inside the content pane, that pane collapses. I have a JQuery based form element that I need to be able to use inside this accordion. The problem is, the second you click on the textbox, or anywhere else in the accordion for that matter it collapses the panel. Another difference from JQuery’s standard UI accordion is that all the panels can be collapsed at once, I don’t want or need this. In fact if it weren’t for the styling of Zurb’s accordion I would just download JQuery’s accordion and use that. However, that isn’t an option and after several hours of trying to solve the problem I realized it was time to consult the experts. Any Suggestions would be GREATLY appreciated. Also, I know there are several questions similar to this posted around, however none address this specific issue and my expertise is in PHP, not Jquery. Please take a look and lend a hand if you can! Thank you in advance.

Zurb foundation: http://foundation.zurb.com/
Zurb foundation Accordion UI: http://foundation.zurb.com/docs/elements.php (scroll down to accordion)

Actual JQuery Script for accordion:

;(function ($, window, undefined){
  'use strict';

   $.fn.foundationAccordion = function (options) {
     var $accordion = $('.accordion');

     if ($accordion.hasClass('click') && !Modernizr.touch) {
      $('.accordion li', this).on({
        mouseenter : function () {
          var p = $(this).parent(),
            flyout = $(this).children('.content').first();

          $('.content', p).not(flyout).hide().parent('li').removeClass('active'); //changed this
          flyout.show(0, function () {
            flyout.parent('li').addClass('active');
          });
        }
      });
    } else {
      $('.accordion li', this).on('click.fndtn', function () {
        var li = $(this),
            p = $(this).parent(),
            flyout = $(this).children('.content').first();

        if (li.hasClass('active')) {
          p.find('li').removeClass('active').end().find('.content').hide();
        } else {
          $('.content', p).not(flyout).hide().parent('li').removeClass('active'); //changed this
          flyout.show(0, function () {
            flyout.parent('li').addClass('active');
          });
        }
      });
    }

  };

})( jQuery, this );

Answer 1

I solved this by putting an event handler on elements inside the accordion and then calling stopPropagation() on the event to prevent it from bubbling up to the element the accordion click handler is bound to.

Example:

function handle_click(event) {
  event.stopPropagation();
  // your event code
}

$('ul.accordion').('click', 'li div.my_class', handle_click);

So in the example above, you should wrap your form inside the div.my_class element so that clicking outside the element, regular accordion collapse behavior occurs, but inside your form, the click event won’t collapse the accordion.