title: jQuery mobile accordion
body: <p>I have a jQuery listview and the following code to change it into an accordion. Within the <code>&lt;li&gt;</code> I have a div with the class "ui-li-accordion" which hides the content and then reveals with a click.</p>
  
  <p>The problem I am having is that I want to put drop-downs in the div but when I click the drop-down the div slides back up again.</p>
  
  <p>What I need is if anywhere in the div is clicked no slide action is taken. Only outside of that.</p>
  
  <pre><code>/*
   * jQuery Mobile Framework : listview accordion extension
   * Copyright (c) Boris Smus, Christopher Liu
   * Note: Code is in draft form and is subject to change
   */
  (function($, undefined ) {
  
      $( "[data-role='listview']" ).live( "listviewcreate", function() {
          var list = $( this ),
          listview = list.data( "listview" );
  
          var accordionExpandOne = function(accordion) {
              // Close all other accordion flaps
              list.find('.ui-li-accordion').slideUp();
              // Open this flap
              accordion.slideToggle();
          }
          var accordionDecorator = function() {
              list.find('.ui-li-accordion').each(function(index, accordion) {
                  // Format the accordion accordingly:
                  // &lt;li&gt;...normal stuff in a jQM li
                  // &lt;div class="ui-li-accordion"&gt;...contents of this&lt;/div&gt;
                  // &lt;/li&gt;
                  // If we find an accordion element, make the li action be to open the accordion element
                  // console.log('accordion found ' + accordion);
                  // Get the li
                  var $accordion = $(accordion);
                  $li = $accordion.closest('li');
                  // Move the contents of the accordion element to the end of the &lt;li&gt;
                  $li.append($accordion.clone());
                  $accordion.remove();
                  // Unbind all click events
                  $li.unbind('click');
                  // Remove all a elements
                  $li.find('a').remove();
                  // Bind click handler to show the accordion
                  $li.bind('click', function() {
                      var $accordion = $(this).find('.ui-li-accordion');
                      // Check that the current flap isn't already open
                      if ($accordion.hasClass('ui-li-accordion-open')) {
                          $accordion.slideUp();
                          $accordion.removeClass('ui-li-accordion-open');
                          return;
                      }
                      console.log('continue');
                      // If not, clear old classes
                      list.find('.ui-li-accordion-open').removeClass('ui-li-accordion-open');
                      $accordion.toggleClass('ui-li-accordion-open');
                      accordionExpandOne($accordion);
                  });
              });
          };
          var accordionExpandInitial = function() {
              //Expand anything already marked with -open.
              accordionExpandOne(list.find('.ui-li-accordion-open'));
          };
  
          accordionDecorator();
          accordionExpandInitial();
  
          // Make sure that the decorator gets called on listview refresh too
          var orig = listview.refresh;
          listview.refresh = function() {
              orig.apply(listview, arguments[0]);
              accordionDecorator();
          };
      });
  })( jQuery );
  </code></pre>