jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.

jsperf.com URLs are mirrored at the same path, e.g:

https://jsperf.com/negative-modulo/2

Can be accessed at:

https://jsperf.app/negative-modulo/2

:jqmData vs Attribute Selector - a lot more data-role elements (v2)

Revision 2 of this benchmark created by frequent on December 14, 2012

Preparation HTML

<script src="http://code.jquery.com/jquery-1.8.2.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
<div data-role="page" id="hoge">
  <div data-role="header">
    <h1>
      Page transitions
    </h1>
    <!-- /header -->
  </div>
  <div data-role="content">
    <ol data-role="listview" data-inset="true">
      <li data-role="list-divider">
        Transitions
      </li>
      <li>
        <a href="#none" data-transition="none">None Transition</a>
      </li>
      <li>
        <a href="#slide">Slide</a>
      </li>
      <li>
        <a href="#slideup" data-transition="slideup">Slideup</a>
      </li>
      <li>
        <a href="#slidedown" data-transition="slidedown">Slidedown</a>
      </li>
      <li>
        <a href="#pop" data-transition="pop">Pop</a>
      </li>
      <li>
        <a href="#fade" data-transition="fade">Fade</a>
      </li>
      <li>
        <a href="#flip" data-transition="flip">Flip</a>
      </li>
    </ol>
    <!-- /content -->
  </div>
  <div data-role="footer">
    <small>
      @t32k 2011
    </small>
    <!-- /footer -->
  </div>
  <!-- /page -->
</div>
<div data-role="page" id="none">
  <div data-role="header">
    <h1>
      None Transition
    </h1>
    <!-- /header -->
  </div>
  <div data-role="content">
    <p>
      Hello jQM
    </p>
    <h2>
      MTG
    </h2>
    <ul>
      <li>
        hoge
      </li>
    </ul>
    <!-- /content -->
  </div>
  <div data-role="footer">
    <small>
      @t32k 2011
    </small>
    <!-- /footer -->
  </div>
  <!-- /page -->
</div>
<div data-role="page" id="slide">
  <div data-role="header">
    <h1>
      Slide
    </h1>
    <!-- /header -->
  </div>
  <div data-role="content">
    <p>
      Hello jQM
    </p>
    <h2>
      MTG
    </h2>
    <ul>
      <li>
        hoge
      </li>
    </ul>
    <!-- /content -->
  </div>
  <div data-role="footer">
    <small>
      @t32k 2011
    </small>
    <!-- /footer -->
  </div>
  <!-- /page -->
</div>
<div data-role="page" id="slideup">
  <div data-role="header">
    <h1>
      Slideup
    </h1>
    <!-- /header -->
  </div>
  <div data-role="content">
    <p>
      Hello jQM
    </p>
    <h2>
      MTG
    </h2>
    <ul>
      <li>
        hoge
      </li>
    </ul>
    <!-- /content -->
  </div>
  <div data-role="footer">
    <small>
      @t32k 2011
    </small>
    <!-- /footer -->
  </div>
  <!-- /page -->
</div>
<div data-role="page" id="slidedown">
  <div data-role="header">
    <h1>
      Slidedown
    </h1>
    <!-- /header -->
  </div>
  <div data-role="content">
    <p>
      Hello jQM
    </p>
    <h2>
      MTG
    </h2>
    <ul>
      <li>
        hoge
      </li>
    </ul>
    <!-- /content -->
  </div>
  <div data-role="footer">
    <small>
      @t32k 2011
    </small>
    <!-- /footer -->
  </div>
  <!-- /page -->
</div>
<div data-role="page" id="pop">
  <div data-role="header">
    <h1>
      Pop
    </h1>
    <!-- /header -->
  </div>
  <div data-role="content">
    <p>
      Hello jQM
    </p>
    <h2>
      MTG
    </h2>
    <ul>
      <li>
        hoge
      </li>
    </ul>
    <!-- /content -->
  </div>
  <div data-role="footer">
    <small>
      @t32k 2011
    </small>
    <!-- /footer -->
  </div>
  <!-- /page -->
</div>
<div data-role="page" id="fade">
  <div data-role="header">
    <h1>
      Fade
    </h1>
    <!-- /header -->
  </div>
  <div data-role="content">
    <p>
      Hello jQM
    </p>
    <h2>
      MTG
    </h2>
    <ul>
      <li>
        hoge
      </li>
    </ul>
    <!-- /content -->
  </div>
  <div data-role="footer">
    <small>
      @t32k 2011
    </small>
    <!-- /footer -->
  </div>
  <!-- /page -->
</div>
<div data-role="page" id="flip">
  <div data-role="header">
    <h1>
      Flip
    </h1>
    <!-- /header -->
  </div>
  <div data-role="content">
    <p>
      Hello jQM
    </p>
    <h2>
      MTG
    </h2>
    <ul>
      <li>
        hoge
      </li>
    </ul>
    <!-- /content -->
  </div>
  <div data-role="footer">
    <small>
      @t32k 2011
    </small>
    <!-- /footer -->
  </div>
  <!-- /page -->
</div>
<div data-role="page" class="type-interior">
  <div data-role="header" data-theme="f">
    <h1>
      Collapsible
    </h1>
    <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
    <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog"
    data-transition="fade">Search</a>
  </div>
  <!-- /header -->
  <div data-role="content">
    <div class="content-primary">
      <h2>
        Collapsible content
      </h2>
      <ul data-role="controlgroup" data-type="horizontal" class="localnav">
        <li>
          <a href="content-collapsible.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a>
        </li>
        <li>
          <a href="content-collapsible-options.html" data-role="button" data-transition="fade">Options</a>
        </li>
        <li>
          <a href="content-collapsible-methods.html" data-role="button" data-transition="fade">Methods</a>
        </li>
        <li>
          <a href="content-collapsible-events.html" data-role="button" data-transition="fade">Events</a>
        </li>
      </ul>
      <p>
        To create a collapsible block of content, create a container and add the
        <code>
          data-role="collapsible"
        </code>
        attribute. Using
        <code>
          data-content-theme
        </code>
        attribute allows you to set a theme for the content of the collapsible. View the
        <a href="../api/data-attributes.html">data- attribute reference</a>
        to see all the possible attributes you can add to collapsibles.
      </p>
      <p>
        Directly inside this container, add any header (H1-H6) or legend element. The framework
        will style the header to look like a clickable button and add a "+" icon to the left
        to indicate it's expandable.
      </p>
      <p>
        After the header, add any HTML markup you want to be collapsible. The framework
        will wrap this markup in a container that will be hidden/shown when the heading is
        clicked.
      </p>
      <p>
        By default, the content will be collapsed.
      </p>
      <pre>
        <code>
          &lt;div
          <strong>
            data-role=&quot;collapsible&quot;
          </strong>
          &gt; &lt;h3&gt;I&#x27;m a header&lt;/h3&gt; &lt;p&gt;I&#x27;m the collapsible content.
          By default I'm closed, but you can click the header to open me.&lt;/p&gt; &lt;/div&gt;
        </code>
      </pre>
      <div data-role="collapsible">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content. By default I'm closed, but you can click the header
          to open me.
        </p>
      </div>
      <h2>
        Expanding collapsibles on load
      </h2>
      <p>
        To expand the content when the page loads, add the
        <code>
          data-collapsed="false"
        </code>
        attribute to the wrapper.
      </p>
      <code>
        &lt;div data-role=&quot;collapsible&quot;
        <strong>
          data-collapsed=&quot;false&quot;&gt;
        </strong>
      </code>
      <p>
        This code will create a collapsible widget like this:
      </p>
      <div data-role="collapsible" data-collapsed="false">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content. I'm expanded by default because I have the "collapsed"
          state set to false.
        </p>
      </div>
      <h2>
        Non-inset collapsibles
      </h2>
      <p>
        By default collapsibles have an inset appearance. To make them full width without
        corner styling add the
        <code>
          data-inset="false"
        </code>
        attribute to the element.
      </p>
      <code>
        &lt;div data-role=&quot;collapsible&quot;
        <strong>
          data-inset=&quot;false&quot;&gt;
        </strong>
      </code>
      <p>
        This code will create a non-inset collapsible:
      </p>
      <div data-role="collapsible" data-inset="false">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content.
        </p>
      </div>
      <h2>
        Mini collapsibles
      </h2>
      <p>
        For a more compact version that is useful in toolbars and tight spaces, add the
        <code>
          data-mini="true"
        </code>
        attribute to the element to create a
        <a href="../forms/forms-all-mini.html">mini version</a>
        .
      </p>
      <code>
        &lt;div data-role=&quot;collapsible&quot;
        <strong>
          data-mini=&quot;true&quot;&gt;
        </strong>
      </code>
      <p>
        This code will create a mini collapsible widget:
      </p>
      <div data-role="collapsible" data-mini="true">
        <h3>
          I'm a mini header
        </h3>
        <p>
          I'm the collapsible content.
        </p>
      </div>
      <h2>
        Custom icons
      </h2>
      <p>
        The default icons of collapsible headings can be overridden by using the
        <code>
          data-collapsed-icon
        </code>
        and
        <code>
          data-expanded-icon
        </code>
        attributes. In the example below,
        <code>
          data-collapsed-icon="arrow-r"
        </code>
        and
        <code>
          data-expanded-icon="arrow-d"
        </code>
        .
      </p>
      <div data-role="collapsible" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
        <h3>
          I have custom icons
        </h3>
        <p>
          <code>
            data-collapsed-icon="arrow-r"
          </code>
          and
          <code>
            data-expanded-icon="arrow-d"
          </code>
        </p>
      </div>
      <h2>
        Icon positioning
      </h2>
      <p>
        The default icon positioning of collapsible headings can be overridden by using
        the
        <code>
          data-iconpos
        </code>
        attribute. In the below case,
        <code>
          data-iconpos="right"
        </code>
        .
      </p>
      <div data-role="collapsible" data-iconpos="right">
        <h3>
          I'm a header
        </h3>
        <p>
          <code>
            data-iconpos="right"
          </code>
        </p>
      </div>
      <h2>
        Theming collapsible content
      </h2>
      <p>
        Collapsible content is minimally styled &mdash; we add only a bit of margin between
        the bar and content, and the header adopts the default theme styles of the container
        within which it sits.
      </p>
      <p>
        To provide a stronger visual connection between the collapsible header and content,
        add the
        <code>
          data-content-theme
        </code>
        attribute to the wrapper and specify a theme swatch letter. This applies the swatch's
        border and
        <em>
          flat
        </em>
        background color (not the gradient) to the content block, removes the rounded corners
        from the bottom of the header, and gives the bottom of the content block rounded
        corners to visually group these elements.
      </p>
      <pre>
        <code>
          &lt;div data-role=&quot;collapsible&quot;
          <strong>
            data-content-theme=&quot;c&quot;
          </strong>
          &gt; &lt;h3&gt;Header&lt;/h3&gt; &lt;p&gt;I&#x27;m the collapsible content with
          a themed content block set to "c".&lt;/p&gt; &lt;/div&gt;
        </code>
      </pre>
      <div data-role="collapsible" data-content-theme="c">
        <h3>
          Header
        </h3>
        <p>
          I'm the collapsible content with a themed content block set to "c".
        </p>
      </div>
      <h2>
        Theming collapsible headers
      </h2>
      <p>
        To set the theme on a collapsible header button, add the
        <code>
          data-theme
        </code>
        attribute to the wrapper and specify a swatch letter. Note that you can mix and
        match swatch letters between the header and content with these theme attributes.
      </p>
      <pre>
        <code>
          &lt;div data-role=&quot;collapsible&quot;
          <strong>
            data-theme=&quot;a&quot; data-content-theme=&quot;a&quot;
          </strong>
          &gt; &lt;h3&gt;Header swatch A&lt;/h3&gt; &lt;p&gt;I&#x27;m the collapsible content
          with a themed content block set to "a".&lt;/p&gt; &lt;/div&gt;
        </code>
      </pre>
      <div data-role="collapsible" data-theme="a" data-content-theme="a">
        <h3>
          Header swatch A
        </h3>
        <p>
          I'm the collapsible content with a themed content block set to "a".
        </p>
      </div>
      <div data-role="collapsible" data-theme="b" data-content-theme="d">
        <h3>
          Header swatch B
        </h3>
        <p>
          I'm the collapsible content with a themed content block set to "d".
        </p>
      </div>
      <h2>
        Corner styling
      </h2>
      <p>
        To create an inset collapsible without rounded corners you can add the
        <code>
          data-corners="false"
        </code>
        attribute to the element.
      </p>
      <code>
        &lt;div data-role=&quot;collapsible&quot;
        <strong>
          data-corners=&quot;false&quot;
        </strong>
        data-theme=&quot;b&quot; data-content-theme=&quot;d&quot;&gt;
      </code>
      <p>
        This code will create an inset collapsible without rounded corners:
      </p>
      <div data-role="collapsible" data-corners="false" data-theme="b" data-content-theme="d">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content.
        </p>
      </div>
      <h2>
        Nested Collapsibles
      </h2>
      <p>
        Collapsibles can be nested inside each other if needed. In this example, we're setting
        the content theme to provide a clearer visual connection between the levels.
      </p>
      <div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content. By default I'm open and displayed on the page, but
          you can click the header to hide me.
        </p>
        <div data-role="collapsible" data-theme="c" data-content-theme="c">
          <h3>
            I'm a nested collapsible with a child collapsible
          </h3>
          <p>
            I'm a child collapsible.
          </p>
          <div data-role="collapsible" data-theme="d" data-content-theme="d">
            <h3>
              Nested inside again.
            </h3>
            <p>
              Three levels deep now.
            </p>
          </div>
          <!-- /section 1A -->
        </div>
        <!-- /section 1 -->
        <div data-role="collapsible" data-content-theme="c">
          <h3>
            Section 3: Form elements
          </h3>
          <form action="#" method="get">
            <div data-role="fieldcontain">
              <label for="textarea">
                Textarea:
              </label>
              <textarea cols="40" rows="8" name="textarea" id="textarea">
              </textarea>
            </div>
            <div data-role="fieldcontain">
              <label for="slider">
                Input slider:
              </label>
              <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
            </div>
            <fieldset class="ui-grid-a">
              <div class="ui-block-a">
                <button type="submit" data-theme="c">
                  Cancel
                </button>
              </div>
              <div class="ui-block-b">
                <button type="submit" data-theme="b">
                  Submit
                </button>
              </div>
            </fieldset>
          </form>
        </div>
        <!-- /section 2 -->
        <div data-role="collapsible" data-content-theme="c">
          <h3>
            Section 4: Collapsed list
          </h3>
          <p>
            Here is an inset list:
          </p>
          <ul data-role="listview" data-inset="true" data-theme="d">
            <li>
              <a href="index.html">Acura</a>
            </li>
            <li>
              <a href="index.html">Audi</a>
            </li>
            <li>
              <a href="index.html">BMW</a>
            </li>
            <li>
              <a href="index.html">Cadillac</a>
            </li>
            <li>
              <a href="index.html">Chrysler</a>
            </li>
            <li>
              <a href="index.html">Dodge</a>
            </li>
            <li>
              <a href="index.html">Ferrari</a>
            </li>
            <li>
              <a href="index.html">Ford</a>
            </li>
          </ul>
        </div>
        <!-- /section 3 -->
      </div>
      <h2>
        Collapsible sets (accordions)
      </h2>
      <p>
        It's possible to combine multiple collapsibles into a grouped set that acts like
        an
        <a href="content-collapsible-set.html">accordion widget</a>
        .
      </p>
    </div>
    <!--/content-primary -->
    <div class="content-secondary">
      <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
        <h3>
          More in this section
        </h3>
        <ul data-role="listview" data-theme="c" data-dividertheme="d">
          <li data-role="list-divider">
            Content Formatting
          </li>
          <li>
            <a href="content-html.html">Basic HTML styles</a>
          </li>
          <li>
            <a href="content-grids.html">Layout grids (columns)</a>
          </li>
          <li>
            <a href="content-grids-responsive.html">Responsive grids</a>
          </li>
          <li data-theme="a">
            <a href="content-collapsible.html">Collapsible content blocks</a>
          </li>
          <li>
            <a href="content-collapsible-set.html">Collapsible sets (accordions)</a>
          </li>
          <li>
            <a href="content-themes.html">Theming content</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- /content -->
  <div data-role="footer" class="footer-docs" data-theme="c">
    <p class="jqm-version">
    </p>
    <p>
      &copy; 2012 jQuery Foundation and other contributors
    </p>
  </div>
</div>
<!-- /page -->
<div data-role="page" class="type-interior">
  <div data-role="header" data-theme="f">
    <h1>
      Collapsible
    </h1>
    <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
    <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog"
    data-transition="fade">Search</a>
  </div>
  <!-- /header -->
  <div data-role="content">
    <div class="content-primary">
      <h2>
        Collapsible content
      </h2>
      <ul data-role="controlgroup" data-type="horizontal" class="localnav">
        <li>
          <a href="content-collapsible.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a>
        </li>
        <li>
          <a href="content-collapsible-options.html" data-role="button" data-transition="fade">Options</a>
        </li>
        <li>
          <a href="content-collapsible-methods.html" data-role="button" data-transition="fade">Methods</a>
        </li>
        <li>
          <a href="content-collapsible-events.html" data-role="button" data-transition="fade">Events</a>
        </li>
      </ul>
      <p>
        To create a collapsible block of content, create a container and add the
        <code>
          data-role="collapsible"
        </code>
        attribute. Using
        <code>
          data-content-theme
        </code>
        attribute allows you to set a theme for the content of the collapsible. View the
        <a href="../api/data-attributes.html">data- attribute reference</a>
        to see all the possible attributes you can add to collapsibles.
      </p>
      <p>
        Directly inside this container, add any header (H1-H6) or legend element. The framework
        will style the header to look like a clickable button and add a "+" icon to the left
        to indicate it's expandable.
      </p>
      <p>
        After the header, add any HTML markup you want to be collapsible. The framework
        will wrap this markup in a container that will be hidden/shown when the heading is
        clicked.
      </p>
      <p>
        By default, the content will be collapsed.
      </p>
      <pre>
        <code>
          &lt;div
          <strong>
            data-role=&quot;collapsible&quot;
          </strong>
          &gt; &lt;h3&gt;I&#x27;m a header&lt;/h3&gt; &lt;p&gt;I&#x27;m the collapsible content.
          By default I'm closed, but you can click the header to open me.&lt;/p&gt; &lt;/div&gt;
        </code>
      </pre>
      <div data-role="collapsible">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content. By default I'm closed, but you can click the header
          to open me.
        </p>
      </div>
      <h2>
        Expanding collapsibles on load
      </h2>
      <p>
        To expand the content when the page loads, add the
        <code>
          data-collapsed="false"
        </code>
        attribute to the wrapper.
      </p>
      <code>
        &lt;div data-role=&quot;collapsible&quot;
        <strong>
          data-collapsed=&quot;false&quot;&gt;
        </strong>
      </code>
      <p>
        This code will create a collapsible widget like this:
      </p>
      <div data-role="collapsible" data-collapsed="false">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content. I'm expanded by default because I have the "collapsed"
          state set to false.
        </p>
      </div>
      <h2>
        Non-inset collapsibles
      </h2>
      <p>
        By default collapsibles have an inset appearance. To make them full width without
        corner styling add the
        <code>
          data-inset="false"
        </code>
        attribute to the element.
      </p>
      <code>
        &lt;div data-role=&quot;collapsible&quot;
        <strong>
          data-inset=&quot;false&quot;&gt;
        </strong>
      </code>
      <p>
        This code will create a non-inset collapsible:
      </p>
      <div data-role="collapsible" data-inset="false">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content.
        </p>
      </div>
      <h2>
        Mini collapsibles
      </h2>
      <p>
        For a more compact version that is useful in toolbars and tight spaces, add the
        <code>
          data-mini="true"
        </code>
        attribute to the element to create a
        <a href="../forms/forms-all-mini.html">mini version</a>
        .
      </p>
      <code>
        &lt;div data-role=&quot;collapsible&quot;
        <strong>
          data-mini=&quot;true&quot;&gt;
        </strong>
      </code>
      <p>
        This code will create a mini collapsible widget:
      </p>
      <div data-role="collapsible" data-mini="true">
        <h3>
          I'm a mini header
        </h3>
        <p>
          I'm the collapsible content.
        </p>
      </div>
      <h2>
        Custom icons
      </h2>
      <p>
        The default icons of collapsible headings can be overridden by using the
        <code>
          data-collapsed-icon
        </code>
        and
        <code>
          data-expanded-icon
        </code>
        attributes. In the example below,
        <code>
          data-collapsed-icon="arrow-r"
        </code>
        and
        <code>
          data-expanded-icon="arrow-d"
        </code>
        .
      </p>
      <div data-role="collapsible" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
        <h3>
          I have custom icons
        </h3>
        <p>
          <code>
            data-collapsed-icon="arrow-r"
          </code>
          and
          <code>
            data-expanded-icon="arrow-d"
          </code>
        </p>
      </div>
      <h2>
        Icon positioning
      </h2>
      <p>
        The default icon positioning of collapsible headings can be overridden by using
        the
        <code>
          data-iconpos
        </code>
        attribute. In the below case,
        <code>
          data-iconpos="right"
        </code>
        .
      </p>
      <div data-role="collapsible" data-iconpos="right">
        <h3>
          I'm a header
        </h3>
        <p>
          <code>
            data-iconpos="right"
          </code>
        </p>
      </div>
      <h2>
        Theming collapsible content
      </h2>
      <p>
        Collapsible content is minimally styled &mdash; we add only a bit of margin between
        the bar and content, and the header adopts the default theme styles of the container
        within which it sits.
      </p>
      <p>
        To provide a stronger visual connection between the collapsible header and content,
        add the
        <code>
          data-content-theme
        </code>
        attribute to the wrapper and specify a theme swatch letter. This applies the swatch's
        border and
        <em>
          flat
        </em>
        background color (not the gradient) to the content block, removes the rounded corners
        from the bottom of the header, and gives the bottom of the content block rounded
        corners to visually group these elements.
      </p>
      <pre>
        <code>
          &lt;div data-role=&quot;collapsible&quot;
          <strong>
            data-content-theme=&quot;c&quot;
          </strong>
          &gt; &lt;h3&gt;Header&lt;/h3&gt; &lt;p&gt;I&#x27;m the collapsible content with
          a themed content block set to "c".&lt;/p&gt; &lt;/div&gt;
        </code>
      </pre>
      <div data-role="collapsible" data-content-theme="c">
        <h3>
          Header
        </h3>
        <p>
          I'm the collapsible content with a themed content block set to "c".
        </p>
      </div>
      <h2>
        Theming collapsible headers
      </h2>
      <p>
        To set the theme on a collapsible header button, add the
        <code>
          data-theme
        </code>
        attribute to the wrapper and specify a swatch letter. Note that you can mix and
        match swatch letters between the header and content with these theme attributes.
      </p>
      <pre>
        <code>
          &lt;div data-role=&quot;collapsible&quot;
          <strong>
            data-theme=&quot;a&quot; data-content-theme=&quot;a&quot;
          </strong>
          &gt; &lt;h3&gt;Header swatch A&lt;/h3&gt; &lt;p&gt;I&#x27;m the collapsible content
          with a themed content block set to "a".&lt;/p&gt; &lt;/div&gt;
        </code>
      </pre>
      <div data-role="collapsible" data-theme="a" data-content-theme="a">
        <h3>
          Header swatch A
        </h3>
        <p>
          I'm the collapsible content with a themed content block set to "a".
        </p>
      </div>
      <div data-role="collapsible" data-theme="b" data-content-theme="d">
        <h3>
          Header swatch B
        </h3>
        <p>
          I'm the collapsible content with a themed content block set to "d".
        </p>
      </div>
      <h2>
        Corner styling
      </h2>
      <p>
        To create an inset collapsible without rounded corners you can add the
        <code>
          data-corners="false"
        </code>
        attribute to the element.
      </p>
      <code>
        &lt;div data-role=&quot;collapsible&quot;
        <strong>
          data-corners=&quot;false&quot;
        </strong>
        data-theme=&quot;b&quot; data-content-theme=&quot;d&quot;&gt;
      </code>
      <p>
        This code will create an inset collapsible without rounded corners:
      </p>
      <div data-role="collapsible" data-corners="false" data-theme="b" data-content-theme="d">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content.
        </p>
      </div>
      <h2>
        Nested Collapsibles
      </h2>
      <p>
        Collapsibles can be nested inside each other if needed. In this example, we're setting
        the content theme to provide a clearer visual connection between the levels.
      </p>
      <div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content. By default I'm open and displayed on the page, but
          you can click the header to hide me.
        </p>
        <div data-role="collapsible" data-theme="c" data-content-theme="c">
          <h3>
            I'm a nested collapsible with a child collapsible
          </h3>
          <p>
            I'm a child collapsible.
          </p>
          <div data-role="collapsible" data-theme="d" data-content-theme="d">
            <h3>
              Nested inside again.
            </h3>
            <p>
              Three levels deep now.
            </p>
          </div>
          <!-- /section 1A -->
        </div>
        <!-- /section 1 -->
        <div data-role="collapsible" data-content-theme="c">
          <h3>
            Section 3: Form elements
          </h3>
          <form action="#" method="get">
            <div data-role="fieldcontain">
              <label for="textarea">
                Textarea:
              </label>
              <textarea cols="40" rows="8" name="textarea" id="textarea">
              </textarea>
            </div>
            <div data-role="fieldcontain">
              <label for="slider">
                Input slider:
              </label>
              <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
            </div>
            <fieldset class="ui-grid-a">
              <div class="ui-block-a">
                <button type="submit" data-theme="c">
                  Cancel
                </button>
              </div>
              <div class="ui-block-b">
                <button type="submit" data-theme="b">
                  Submit
                </button>
              </div>
            </fieldset>
          </form>
        </div>
        <!-- /section 2 -->
        <div data-role="collapsible" data-content-theme="c">
          <h3>
            Section 4: Collapsed list
          </h3>
          <p>
            Here is an inset list:
          </p>
          <ul data-role="listview" data-inset="true" data-theme="d">
            <li>
              <a href="index.html">Acura</a>
            </li>
            <li>
              <a href="index.html">Audi</a>
            </li>
            <li>
              <a href="index.html">BMW</a>
            </li>
            <li>
              <a href="index.html">Cadillac</a>
            </li>
            <li>
              <a href="index.html">Chrysler</a>
            </li>
            <li>
              <a href="index.html">Dodge</a>
            </li>
            <li>
              <a href="index.html">Ferrari</a>
            </li>
            <li>
              <a href="index.html">Ford</a>
            </li>
          </ul>
        </div>
        <!-- /section 3 -->
      </div>
      <h2>
        Collapsible sets (accordions)
      </h2>
      <p>
        It's possible to combine multiple collapsibles into a grouped set that acts like
        an
        <a href="content-collapsible-set.html">accordion widget</a>
        .
      </p>
    </div>
    <!--/content-primary -->
    <div class="content-secondary">
      <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
        <h3>
          More in this section
        </h3>
        <ul data-role="listview" data-theme="c" data-dividertheme="d">
          <li data-role="list-divider">
            Content Formatting
          </li>
          <li>
            <a href="content-html.html">Basic HTML styles</a>
          </li>
          <li>
            <a href="content-grids.html">Layout grids (columns)</a>
          </li>
          <li>
            <a href="content-grids-responsive.html">Responsive grids</a>
          </li>
          <li data-theme="a">
            <a href="content-collapsible.html">Collapsible content blocks</a>
          </li>
          <li>
            <a href="content-collapsible-set.html">Collapsible sets (accordions)</a>
          </li>
          <li>
            <a href="content-themes.html">Theming content</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- /content -->
  <div data-role="footer" class="footer-docs" data-theme="c">
    <p class="jqm-version">
    </p>
    <p>
      &copy; 2012 jQuery Foundation and other contributors
    </p>
  </div>
</div>
<!-- /page -->
<div data-role="page" class="type-interior">
  <div data-role="header" data-theme="f">
    <h1>
      Collapsible
    </h1>
    <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
    <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog"
    data-transition="fade">Search</a>
  </div>
  <!-- /header -->
  <div data-role="content">
    <div class="content-primary">
      <h2>
        Collapsible content
      </h2>
      <ul data-role="controlgroup" data-type="horizontal" class="localnav">
        <li>
          <a href="content-collapsible.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a>
        </li>
        <li>
          <a href="content-collapsible-options.html" data-role="button" data-transition="fade">Options</a>
        </li>
        <li>
          <a href="content-collapsible-methods.html" data-role="button" data-transition="fade">Methods</a>
        </li>
        <li>
          <a href="content-collapsible-events.html" data-role="button" data-transition="fade">Events</a>
        </li>
      </ul>
      <p>
        To create a collapsible block of content, create a container and add the
        <code>
          data-role="collapsible"
        </code>
        attribute. Using
        <code>
          data-content-theme
        </code>
        attribute allows you to set a theme for the content of the collapsible. View the
        <a href="../api/data-attributes.html">data- attribute reference</a>
        to see all the possible attributes you can add to collapsibles.
      </p>
      <p>
        Directly inside this container, add any header (H1-H6) or legend element. The framework
        will style the header to look like a clickable button and add a "+" icon to the left
        to indicate it's expandable.
      </p>
      <p>
        After the header, add any HTML markup you want to be collapsible. The framework
        will wrap this markup in a container that will be hidden/shown when the heading is
        clicked.
      </p>
      <p>
        By default, the content will be collapsed.
      </p>
      <pre>
        <code>
          &lt;div
          <strong>
            data-role=&quot;collapsible&quot;
          </strong>
          &gt; &lt;h3&gt;I&#x27;m a header&lt;/h3&gt; &lt;p&gt;I&#x27;m the collapsible content.
          By default I'm closed, but you can click the header to open me.&lt;/p&gt; &lt;/div&gt;
        </code>
      </pre>
      <div data-role="collapsible">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content. By default I'm closed, but you can click the header
          to open me.
        </p>
      </div>
      <h2>
        Expanding collapsibles on load
      </h2>
      <p>
        To expand the content when the page loads, add the
        <code>
          data-collapsed="false"
        </code>
        attribute to the wrapper.
      </p>
      <code>
        &lt;div data-role=&quot;collapsible&quot;
        <strong>
          data-collapsed=&quot;false&quot;&gt;
        </strong>
      </code>
      <p>
        This code will create a collapsible widget like this:
      </p>
      <div data-role="collapsible" data-collapsed="false">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content. I'm expanded by default because I have the "collapsed"
          state set to false.
        </p>
      </div>
      <h2>
        Non-inset collapsibles
      </h2>
      <p>
        By default collapsibles have an inset appearance. To make them full width without
        corner styling add the
        <code>
          data-inset="false"
        </code>
        attribute to the element.
      </p>
      <code>
        &lt;div data-role=&quot;collapsible&quot;
        <strong>
          data-inset=&quot;false&quot;&gt;
        </strong>
      </code>
      <p>
        This code will create a non-inset collapsible:
      </p>
      <div data-role="collapsible" data-inset="false">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content.
        </p>
      </div>
      <h2>
        Mini collapsibles
      </h2>
      <p>
        For a more compact version that is useful in toolbars and tight spaces, add the
        <code>
          data-mini="true"
        </code>
        attribute to the element to create a
        <a href="../forms/forms-all-mini.html">mini version</a>
        .
      </p>
      <code>
        &lt;div data-role=&quot;collapsible&quot;
        <strong>
          data-mini=&quot;true&quot;&gt;
        </strong>
      </code>
      <p>
        This code will create a mini collapsible widget:
      </p>
      <div data-role="collapsible" data-mini="true">
        <h3>
          I'm a mini header
        </h3>
        <p>
          I'm the collapsible content.
        </p>
      </div>
      <h2>
        Custom icons
      </h2>
      <p>
        The default icons of collapsible headings can be overridden by using the
        <code>
          data-collapsed-icon
        </code>
        and
        <code>
          data-expanded-icon
        </code>
        attributes. In the example below,
        <code>
          data-collapsed-icon="arrow-r"
        </code>
        and
        <code>
          data-expanded-icon="arrow-d"
        </code>
        .
      </p>
      <div data-role="collapsible" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
        <h3>
          I have custom icons
        </h3>
        <p>
          <code>
            data-collapsed-icon="arrow-r"
          </code>
          and
          <code>
            data-expanded-icon="arrow-d"
          </code>
        </p>
      </div>
      <h2>
        Icon positioning
      </h2>
      <p>
        The default icon positioning of collapsible headings can be overridden by using
        the
        <code>
          data-iconpos
        </code>
        attribute. In the below case,
        <code>
          data-iconpos="right"
        </code>
        .
      </p>
      <div data-role="collapsible" data-iconpos="right">
        <h3>
          I'm a header
        </h3>
        <p>
          <code>
            data-iconpos="right"
          </code>
        </p>
      </div>
      <h2>
        Theming collapsible content
      </h2>
      <p>
        Collapsible content is minimally styled &mdash; we add only a bit of margin between
        the bar and content, and the header adopts the default theme styles of the container
        within which it sits.
      </p>
      <p>
        To provide a stronger visual connection between the collapsible header and content,
        add the
        <code>
          data-content-theme
        </code>
        attribute to the wrapper and specify a theme swatch letter. This applies the swatch's
        border and
        <em>
          flat
        </em>
        background color (not the gradient) to the content block, removes the rounded corners
        from the bottom of the header, and gives the bottom of the content block rounded
        corners to visually group these elements.
      </p>
      <pre>
        <code>
          &lt;div data-role=&quot;collapsible&quot;
          <strong>
            data-content-theme=&quot;c&quot;
          </strong>
          &gt; &lt;h3&gt;Header&lt;/h3&gt; &lt;p&gt;I&#x27;m the collapsible content with
          a themed content block set to "c".&lt;/p&gt; &lt;/div&gt;
        </code>
      </pre>
      <div data-role="collapsible" data-content-theme="c">
        <h3>
          Header
        </h3>
        <p>
          I'm the collapsible content with a themed content block set to "c".
        </p>
      </div>
      <h2>
        Theming collapsible headers
      </h2>
      <p>
        To set the theme on a collapsible header button, add the
        <code>
          data-theme
        </code>
        attribute to the wrapper and specify a swatch letter. Note that you can mix and
        match swatch letters between the header and content with these theme attributes.
      </p>
      <pre>
        <code>
          &lt;div data-role=&quot;collapsible&quot;
          <strong>
            data-theme=&quot;a&quot; data-content-theme=&quot;a&quot;
          </strong>
          &gt; &lt;h3&gt;Header swatch A&lt;/h3&gt; &lt;p&gt;I&#x27;m the collapsible content
          with a themed content block set to "a".&lt;/p&gt; &lt;/div&gt;
        </code>
      </pre>
      <div data-role="collapsible" data-theme="a" data-content-theme="a">
        <h3>
          Header swatch A
        </h3>
        <p>
          I'm the collapsible content with a themed content block set to "a".
        </p>
      </div>
      <div data-role="collapsible" data-theme="b" data-content-theme="d">
        <h3>
          Header swatch B
        </h3>
        <p>
          I'm the collapsible content with a themed content block set to "d".
        </p>
      </div>
      <h2>
        Corner styling
      </h2>
      <p>
        To create an inset collapsible without rounded corners you can add the
        <code>
          data-corners="false"
        </code>
        attribute to the element.
      </p>
      <code>
        &lt;div data-role=&quot;collapsible&quot;
        <strong>
          data-corners=&quot;false&quot;
        </strong>
        data-theme=&quot;b&quot; data-content-theme=&quot;d&quot;&gt;
      </code>
      <p>
        This code will create an inset collapsible without rounded corners:
      </p>
      <div data-role="collapsible" data-corners="false" data-theme="b" data-content-theme="d">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content.
        </p>
      </div>
      <h2>
        Nested Collapsibles
      </h2>
      <p>
        Collapsibles can be nested inside each other if needed. In this example, we're setting
        the content theme to provide a clearer visual connection between the levels.
      </p>
      <div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content. By default I'm open and displayed on the page, but
          you can click the header to hide me.
        </p>
        <div data-role="collapsible" data-theme="c" data-content-theme="c">
          <h3>
            I'm a nested collapsible with a child collapsible
          </h3>
          <p>
            I'm a child collapsible.
          </p>
          <div data-role="collapsible" data-theme="d" data-content-theme="d">
            <h3>
              Nested inside again.
            </h3>
            <p>
              Three levels deep now.
            </p>
          </div>
          <!-- /section 1A -->
        </div>
        <!-- /section 1 -->
        <div data-role="collapsible" data-content-theme="c">
          <h3>
            Section 3: Form elements
          </h3>
          <form action="#" method="get">
            <div data-role="fieldcontain">
              <label for="textarea">
                Textarea:
              </label>
              <textarea cols="40" rows="8" name="textarea" id="textarea">
              </textarea>
            </div>
            <div data-role="fieldcontain">
              <label for="slider">
                Input slider:
              </label>
              <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
            </div>
            <fieldset class="ui-grid-a">
              <div class="ui-block-a">
                <button type="submit" data-theme="c">
                  Cancel
                </button>
              </div>
              <div class="ui-block-b">
                <button type="submit" data-theme="b">
                  Submit
                </button>
              </div>
            </fieldset>
          </form>
        </div>
        <!-- /section 2 -->
        <div data-role="collapsible" data-content-theme="c">
          <h3>
            Section 4: Collapsed list
          </h3>
          <p>
            Here is an inset list:
          </p>
          <ul data-role="listview" data-inset="true" data-theme="d">
            <li>
              <a href="index.html">Acura</a>
            </li>
            <li>
              <a href="index.html">Audi</a>
            </li>
            <li>
              <a href="index.html">BMW</a>
            </li>
            <li>
              <a href="index.html">Cadillac</a>
            </li>
            <li>
              <a href="index.html">Chrysler</a>
            </li>
            <li>
              <a href="index.html">Dodge</a>
            </li>
            <li>
              <a href="index.html">Ferrari</a>
            </li>
            <li>
              <a href="index.html">Ford</a>
            </li>
          </ul>
        </div>
        <!-- /section 3 -->
      </div>
      <h2>
        Collapsible sets (accordions)
      </h2>
      <p>
        It's possible to combine multiple collapsibles into a grouped set that acts like
        an
        <a href="content-collapsible-set.html">accordion widget</a>
        .
      </p>
    </div>
    <!--/content-primary -->
    <div class="content-secondary">
      <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
        <h3>
          More in this section
        </h3>
        <ul data-role="listview" data-theme="c" data-dividertheme="d">
          <li data-role="list-divider">
            Content Formatting
          </li>
          <li>
            <a href="content-html.html">Basic HTML styles</a>
          </li>
          <li>
            <a href="content-grids.html">Layout grids (columns)</a>
          </li>
          <li>
            <a href="content-grids-responsive.html">Responsive grids</a>
          </li>
          <li data-theme="a">
            <a href="content-collapsible.html">Collapsible content blocks</a>
          </li>
          <li>
            <a href="content-collapsible-set.html">Collapsible sets (accordions)</a>
          </li>
          <li>
            <a href="content-themes.html">Theming content</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- /content -->
  <div data-role="footer" class="footer-docs" data-theme="c">
    <p class="jqm-version">
    </p>
    <p>
      &copy; 2012 jQuery Foundation and other contributors
    </p>
  </div>
</div>
<!-- /page -->
<div data-role="page" class="type-interior">
  <div data-role="header" data-theme="f">
    <h1>
      Collapsible
    </h1>
    <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
    <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog"
    data-transition="fade">Search</a>
  </div>
  <!-- /header -->
  <div data-role="content">
    <div class="content-primary">
      <h2>
        Collapsible content
      </h2>
      <ul data-role="controlgroup" data-type="horizontal" class="localnav">
        <li>
          <a href="content-collapsible.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a>
        </li>
        <li>
          <a href="content-collapsible-options.html" data-role="button" data-transition="fade">Options</a>
        </li>
        <li>
          <a href="content-collapsible-methods.html" data-role="button" data-transition="fade">Methods</a>
        </li>
        <li>
          <a href="content-collapsible-events.html" data-role="button" data-transition="fade">Events</a>
        </li>
      </ul>
      <p>
        To create a collapsible block of content, create a container and add the
        <code>
          data-role="collapsible"
        </code>
        attribute. Using
        <code>
          data-content-theme
        </code>
        attribute allows you to set a theme for the content of the collapsible. View the
        <a href="../api/data-attributes.html">data- attribute reference</a>
        to see all the possible attributes you can add to collapsibles.
      </p>
      <p>
        Directly inside this container, add any header (H1-H6) or legend element. The framework
        will style the header to look like a clickable button and add a "+" icon to the left
        to indicate it's expandable.
      </p>
      <p>
        After the header, add any HTML markup you want to be collapsible. The framework
        will wrap this markup in a container that will be hidden/shown when the heading is
        clicked.
      </p>
      <p>
        By default, the content will be collapsed.
      </p>
      <pre>
        <code>
          &lt;div
          <strong>
            data-role=&quot;collapsible&quot;
          </strong>
          &gt; &lt;h3&gt;I&#x27;m a header&lt;/h3&gt; &lt;p&gt;I&#x27;m the collapsible content.
          By default I'm closed, but you can click the header to open me.&lt;/p&gt; &lt;/div&gt;
        </code>
      </pre>
      <div data-role="collapsible">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content. By default I'm closed, but you can click the header
          to open me.
        </p>
      </div>
      <h2>
        Expanding collapsibles on load
      </h2>
      <p>
        To expand the content when the page loads, add the
        <code>
          data-collapsed="false"
        </code>
        attribute to the wrapper.
      </p>
      <code>
        &lt;div data-role=&quot;collapsible&quot;
        <strong>
          data-collapsed=&quot;false&quot;&gt;
        </strong>
      </code>
      <p>
        This code will create a collapsible widget like this:
      </p>
      <div data-role="collapsible" data-collapsed="false">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content. I'm expanded by default because I have the "collapsed"
          state set to false.
        </p>
      </div>
      <h2>
        Non-inset collapsibles
      </h2>
      <p>
        By default collapsibles have an inset appearance. To make them full width without
        corner styling add the
        <code>
          data-inset="false"
        </code>
        attribute to the element.
      </p>
      <code>
        &lt;div data-role=&quot;collapsible&quot;
        <strong>
          data-inset=&quot;false&quot;&gt;
        </strong>
      </code>
      <p>
        This code will create a non-inset collapsible:
      </p>
      <div data-role="collapsible" data-inset="false">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content.
        </p>
      </div>
      <h2>
        Mini collapsibles
      </h2>
      <p>
        For a more compact version that is useful in toolbars and tight spaces, add the
        <code>
          data-mini="true"
        </code>
        attribute to the element to create a
        <a href="../forms/forms-all-mini.html">mini version</a>
        .
      </p>
      <code>
        &lt;div data-role=&quot;collapsible&quot;
        <strong>
          data-mini=&quot;true&quot;&gt;
        </strong>
      </code>
      <p>
        This code will create a mini collapsible widget:
      </p>
      <div data-role="collapsible" data-mini="true">
        <h3>
          I'm a mini header
        </h3>
        <p>
          I'm the collapsible content.
        </p>
      </div>
      <h2>
        Custom icons
      </h2>
      <p>
        The default icons of collapsible headings can be overridden by using the
        <code>
          data-collapsed-icon
        </code>
        and
        <code>
          data-expanded-icon
        </code>
        attributes. In the example below,
        <code>
          data-collapsed-icon="arrow-r"
        </code>
        and
        <code>
          data-expanded-icon="arrow-d"
        </code>
        .
      </p>
      <div data-role="collapsible" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
        <h3>
          I have custom icons
        </h3>
        <p>
          <code>
            data-collapsed-icon="arrow-r"
          </code>
          and
          <code>
            data-expanded-icon="arrow-d"
          </code>
        </p>
      </div>
      <h2>
        Icon positioning
      </h2>
      <p>
        The default icon positioning of collapsible headings can be overridden by using
        the
        <code>
          data-iconpos
        </code>
        attribute. In the below case,
        <code>
          data-iconpos="right"
        </code>
        .
      </p>
      <div data-role="collapsible" data-iconpos="right">
        <h3>
          I'm a header
        </h3>
        <p>
          <code>
            data-iconpos="right"
          </code>
        </p>
      </div>
      <h2>
        Theming collapsible content
      </h2>
      <p>
        Collapsible content is minimally styled &mdash; we add only a bit of margin between
        the bar and content, and the header adopts the default theme styles of the container
        within which it sits.
      </p>
      <p>
        To provide a stronger visual connection between the collapsible header and content,
        add the
        <code>
          data-content-theme
        </code>
        attribute to the wrapper and specify a theme swatch letter. This applies the swatch's
        border and
        <em>
          flat
        </em>
        background color (not the gradient) to the content block, removes the rounded corners
        from the bottom of the header, and gives the bottom of the content block rounded
        corners to visually group these elements.
      </p>
      <pre>
        <code>
          &lt;div data-role=&quot;collapsible&quot;
          <strong>
            data-content-theme=&quot;c&quot;
          </strong>
          &gt; &lt;h3&gt;Header&lt;/h3&gt; &lt;p&gt;I&#x27;m the collapsible content with
          a themed content block set to "c".&lt;/p&gt; &lt;/div&gt;
        </code>
      </pre>
      <div data-role="collapsible" data-content-theme="c">
        <h3>
          Header
        </h3>
        <p>
          I'm the collapsible content with a themed content block set to "c".
        </p>
      </div>
      <h2>
        Theming collapsible headers
      </h2>
      <p>
        To set the theme on a collapsible header button, add the
        <code>
          data-theme
        </code>
        attribute to the wrapper and specify a swatch letter. Note that you can mix and
        match swatch letters between the header and content with these theme attributes.
      </p>
      <pre>
        <code>
          &lt;div data-role=&quot;collapsible&quot;
          <strong>
            data-theme=&quot;a&quot; data-content-theme=&quot;a&quot;
          </strong>
          &gt; &lt;h3&gt;Header swatch A&lt;/h3&gt; &lt;p&gt;I&#x27;m the collapsible content
          with a themed content block set to "a".&lt;/p&gt; &lt;/div&gt;
        </code>
      </pre>
      <div data-role="collapsible" data-theme="a" data-content-theme="a">
        <h3>
          Header swatch A
        </h3>
        <p>
          I'm the collapsible content with a themed content block set to "a".
        </p>
      </div>
      <div data-role="collapsible" data-theme="b" data-content-theme="d">
        <h3>
          Header swatch B
        </h3>
        <p>
          I'm the collapsible content with a themed content block set to "d".
        </p>
      </div>
      <h2>
        Corner styling
      </h2>
      <p>
        To create an inset collapsible without rounded corners you can add the
        <code>
          data-corners="false"
        </code>
        attribute to the element.
      </p>
      <code>
        &lt;div data-role=&quot;collapsible&quot;
        <strong>
          data-corners=&quot;false&quot;
        </strong>
        data-theme=&quot;b&quot; data-content-theme=&quot;d&quot;&gt;
      </code>
      <p>
        This code will create an inset collapsible without rounded corners:
      </p>
      <div data-role="collapsible" data-corners="false" data-theme="b" data-content-theme="d">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content.
        </p>
      </div>
      <h2>
        Nested Collapsibles
      </h2>
      <p>
        Collapsibles can be nested inside each other if needed. In this example, we're setting
        the content theme to provide a clearer visual connection between the levels.
      </p>
      <div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content. By default I'm open and displayed on the page, but
          you can click the header to hide me.
        </p>
        <div data-role="collapsible" data-theme="c" data-content-theme="c">
          <h3>
            I'm a nested collapsible with a child collapsible
          </h3>
          <p>
            I'm a child collapsible.
          </p>
          <div data-role="collapsible" data-theme="d" data-content-theme="d">
            <h3>
              Nested inside again.
            </h3>
            <p>
              Three levels deep now.
            </p>
          </div>
          <!-- /section 1A -->
        </div>
        <!-- /section 1 -->
        <div data-role="collapsible" data-content-theme="c">
          <h3>
            Section 3: Form elements
          </h3>
          <form action="#" method="get">
            <div data-role="fieldcontain">
              <label for="textarea">
                Textarea:
              </label>
              <textarea cols="40" rows="8" name="textarea" id="textarea">
              </textarea>
            </div>
            <div data-role="fieldcontain">
              <label for="slider">
                Input slider:
              </label>
              <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
            </div>
            <fieldset class="ui-grid-a">
              <div class="ui-block-a">
                <button type="submit" data-theme="c">
                  Cancel
                </button>
              </div>
              <div class="ui-block-b">
                <button type="submit" data-theme="b">
                  Submit
                </button>
              </div>
            </fieldset>
          </form>
        </div>
        <!-- /section 2 -->
        <div data-role="collapsible" data-content-theme="c">
          <h3>
            Section 4: Collapsed list
          </h3>
          <p>
            Here is an inset list:
          </p>
          <ul data-role="listview" data-inset="true" data-theme="d">
            <li>
              <a href="index.html">Acura</a>
            </li>
            <li>
              <a href="index.html">Audi</a>
            </li>
            <li>
              <a href="index.html">BMW</a>
            </li>
            <li>
              <a href="index.html">Cadillac</a>
            </li>
            <li>
              <a href="index.html">Chrysler</a>
            </li>
            <li>
              <a href="index.html">Dodge</a>
            </li>
            <li>
              <a href="index.html">Ferrari</a>
            </li>
            <li>
              <a href="index.html">Ford</a>
            </li>
          </ul>
        </div>
        <!-- /section 3 -->
      </div>
      <h2>
        Collapsible sets (accordions)
      </h2>
      <p>
        It's possible to combine multiple collapsibles into a grouped set that acts like
        an
        <a href="content-collapsible-set.html">accordion widget</a>
        .
      </p>
    </div>
    <!--/content-primary -->
    <div class="content-secondary">
      <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
        <h3>
          More in this section
        </h3>
        <ul data-role="listview" data-theme="c" data-dividertheme="d">
          <li data-role="list-divider">
            Content Formatting
          </li>
          <li>
            <a href="content-html.html">Basic HTML styles</a>
          </li>
          <li>
            <a href="content-grids.html">Layout grids (columns)</a>
          </li>
          <li>
            <a href="content-grids-responsive.html">Responsive grids</a>
          </li>
          <li data-theme="a">
            <a href="content-collapsible.html">Collapsible content blocks</a>
          </li>
          <li>
            <a href="content-collapsible-set.html">Collapsible sets (accordions)</a>
          </li>
          <li>
            <a href="content-themes.html">Theming content</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- /content -->
  <div data-role="footer" class="footer-docs" data-theme="c">
    <p class="jqm-version">
    </p>
    <p>
      &copy; 2012 jQuery Foundation and other contributors
    </p>
  </div>
</div>
<!-- /page -->
<div data-role="page" class="type-interior">
  <div data-role="header" data-theme="f">
    <h1>
      Collapsible
    </h1>
    <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
    <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog"
    data-transition="fade">Search</a>
  </div>
  <!-- /header -->
  <div data-role="content">
    <div class="content-primary">
      <h2>
        Collapsible content
      </h2>
      <ul data-role="controlgroup" data-type="horizontal" class="localnav">
        <li>
          <a href="content-collapsible.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a>
        </li>
        <li>
          <a href="content-collapsible-options.html" data-role="button" data-transition="fade">Options</a>
        </li>
        <li>
          <a href="content-collapsible-methods.html" data-role="button" data-transition="fade">Methods</a>
        </li>
        <li>
          <a href="content-collapsible-events.html" data-role="button" data-transition="fade">Events</a>
        </li>
      </ul>
      <p>
        To create a collapsible block of content, create a container and add the
        <code>
          data-role="collapsible"
        </code>
        attribute. Using
        <code>
          data-content-theme
        </code>
        attribute allows you to set a theme for the content of the collapsible. View the
        <a href="../api/data-attributes.html">data- attribute reference</a>
        to see all the possible attributes you can add to collapsibles.
      </p>
      <p>
        Directly inside this container, add any header (H1-H6) or legend element. The framework
        will style the header to look like a clickable button and add a "+" icon to the left
        to indicate it's expandable.
      </p>
      <p>
        After the header, add any HTML markup you want to be collapsible. The framework
        will wrap this markup in a container that will be hidden/shown when the heading is
        clicked.
      </p>
      <p>
        By default, the content will be collapsed.
      </p>
      <pre>
        <code>
          &lt;div
          <strong>
            data-role=&quot;collapsible&quot;
          </strong>
          &gt; &lt;h3&gt;I&#x27;m a header&lt;/h3&gt; &lt;p&gt;I&#x27;m the collapsible content.
          By default I'm closed, but you can click the header to open me.&lt;/p&gt; &lt;/div&gt;
        </code>
      </pre>
      <div data-role="collapsible">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content. By default I'm closed, but you can click the header
          to open me.
        </p>
      </div>
      <h2>
        Expanding collapsibles on load
      </h2>
      <p>
        To expand the content when the page loads, add the
        <code>
          data-collapsed="false"
        </code>
        attribute to the wrapper.
      </p>
      <code>
        &lt;div data-role=&quot;collapsible&quot;
        <strong>
          data-collapsed=&quot;false&quot;&gt;
        </strong>
      </code>
      <p>
        This code will create a collapsible widget like this:
      </p>
      <div data-role="collapsible" data-collapsed="false">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content. I'm expanded by default because I have the "collapsed"
          state set to false.
        </p>
      </div>
      <h2>
        Non-inset collapsibles
      </h2>
      <p>
        By default collapsibles have an inset appearance. To make them full width without
        corner styling add the
        <code>
          data-inset="false"
        </code>
        attribute to the element.
      </p>
      <code>
        &lt;div data-role=&quot;collapsible&quot;
        <strong>
          data-inset=&quot;false&quot;&gt;
        </strong>
      </code>
      <p>
        This code will create a non-inset collapsible:
      </p>
      <div data-role="collapsible" data-inset="false">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content.
        </p>
      </div>
      <h2>
        Mini collapsibles
      </h2>
      <p>
        For a more compact version that is useful in toolbars and tight spaces, add the
        <code>
          data-mini="true"
        </code>
        attribute to the element to create a
        <a href="../forms/forms-all-mini.html">mini version</a>
        .
      </p>
      <code>
        &lt;div data-role=&quot;collapsible&quot;
        <strong>
          data-mini=&quot;true&quot;&gt;
        </strong>
      </code>
      <p>
        This code will create a mini collapsible widget:
      </p>
      <div data-role="collapsible" data-mini="true">
        <h3>
          I'm a mini header
        </h3>
        <p>
          I'm the collapsible content.
        </p>
      </div>
      <h2>
        Custom icons
      </h2>
      <p>
        The default icons of collapsible headings can be overridden by using the
        <code>
          data-collapsed-icon
        </code>
        and
        <code>
          data-expanded-icon
        </code>
        attributes. In the example below,
        <code>
          data-collapsed-icon="arrow-r"
        </code>
        and
        <code>
          data-expanded-icon="arrow-d"
        </code>
        .
      </p>
      <div data-role="collapsible" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
        <h3>
          I have custom icons
        </h3>
        <p>
          <code>
            data-collapsed-icon="arrow-r"
          </code>
          and
          <code>
            data-expanded-icon="arrow-d"
          </code>
        </p>
      </div>
      <h2>
        Icon positioning
      </h2>
      <p>
        The default icon positioning of collapsible headings can be overridden by using
        the
        <code>
          data-iconpos
        </code>
        attribute. In the below case,
        <code>
          data-iconpos="right"
        </code>
        .
      </p>
      <div data-role="collapsible" data-iconpos="right">
        <h3>
          I'm a header
        </h3>
        <p>
          <code>
            data-iconpos="right"
          </code>
        </p>
      </div>
      <h2>
        Theming collapsible content
      </h2>
      <p>
        Collapsible content is minimally styled &mdash; we add only a bit of margin between
        the bar and content, and the header adopts the default theme styles of the container
        within which it sits.
      </p>
      <p>
        To provide a stronger visual connection between the collapsible header and content,
        add the
        <code>
          data-content-theme
        </code>
        attribute to the wrapper and specify a theme swatch letter. This applies the swatch's
        border and
        <em>
          flat
        </em>
        background color (not the gradient) to the content block, removes the rounded corners
        from the bottom of the header, and gives the bottom of the content block rounded
        corners to visually group these elements.
      </p>
      <pre>
        <code>
          &lt;div data-role=&quot;collapsible&quot;
          <strong>
            data-content-theme=&quot;c&quot;
          </strong>
          &gt; &lt;h3&gt;Header&lt;/h3&gt; &lt;p&gt;I&#x27;m the collapsible content with
          a themed content block set to "c".&lt;/p&gt; &lt;/div&gt;
        </code>
      </pre>
      <div data-role="collapsible" data-content-theme="c">
        <h3>
          Header
        </h3>
        <p>
          I'm the collapsible content with a themed content block set to "c".
        </p>
      </div>
      <h2>
        Theming collapsible headers
      </h2>
      <p>
        To set the theme on a collapsible header button, add the
        <code>
          data-theme
        </code>
        attribute to the wrapper and specify a swatch letter. Note that you can mix and
        match swatch letters between the header and content with these theme attributes.
      </p>
      <pre>
        <code>
          &lt;div data-role=&quot;collapsible&quot;
          <strong>
            data-theme=&quot;a&quot; data-content-theme=&quot;a&quot;
          </strong>
          &gt; &lt;h3&gt;Header swatch A&lt;/h3&gt; &lt;p&gt;I&#x27;m the collapsible content
          with a themed content block set to "a".&lt;/p&gt; &lt;/div&gt;
        </code>
      </pre>
      <div data-role="collapsible" data-theme="a" data-content-theme="a">
        <h3>
          Header swatch A
        </h3>
        <p>
          I'm the collapsible content with a themed content block set to "a".
        </p>
      </div>
      <div data-role="collapsible" data-theme="b" data-content-theme="d">
        <h3>
          Header swatch B
        </h3>
        <p>
          I'm the collapsible content with a themed content block set to "d".
        </p>
      </div>
      <h2>
        Corner styling
      </h2>
      <p>
        To create an inset collapsible without rounded corners you can add the
        <code>
          data-corners="false"
        </code>
        attribute to the element.
      </p>
      <code>
        &lt;div data-role=&quot;collapsible&quot;
        <strong>
          data-corners=&quot;false&quot;
        </strong>
        data-theme=&quot;b&quot; data-content-theme=&quot;d&quot;&gt;
      </code>
      <p>
        This code will create an inset collapsible without rounded corners:
      </p>
      <div data-role="collapsible" data-corners="false" data-theme="b" data-content-theme="d">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content.
        </p>
      </div>
      <h2>
        Nested Collapsibles
      </h2>
      <p>
        Collapsibles can be nested inside each other if needed. In this example, we're setting
        the content theme to provide a clearer visual connection between the levels.
      </p>
      <div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
        <h3>
          I'm a header
        </h3>
        <p>
          I'm the collapsible content. By default I'm open and displayed on the page, but
          you can click the header to hide me.
        </p>
        <div data-role="collapsible" data-theme="c" data-content-theme="c">
          <h3>
            I'm a nested collapsible with a child collapsible
          </h3>
          <p>
            I'm a child collapsible.
          </p>
          <div data-role="collapsible" data-theme="d" data-content-theme="d">
            <h3>
              Nested inside again.
            </h3>
            <p>
              Three levels deep now.
            </p>
          </div>
          <!-- /section 1A -->
        </div>
        <!-- /section 1 -->
        <div data-role="collapsible" data-content-theme="c">
          <h3>
            Section 3: Form elements
          </h3>
          <form action="#" method="get">
            <div data-role="fieldcontain">
              <label for="textarea">
                Textarea:
              </label>
              <textarea cols="40" rows="8" name="textarea" id="textarea">
              </textarea>
            </div>
            <div data-role="fieldcontain">
              <label for="slider">
                Input slider:
              </label>
              <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
            </div>
            <fieldset class="ui-grid-a">
              <div class="ui-block-a">
                <button type="submit" data-theme="c">
                  Cancel
                </button>
              </div>
              <div class="ui-block-b">
                <button type="submit" data-theme="b">
                  Submit
                </button>
              </div>
            </fieldset>
          </form>
        </div>
        <!-- /section 2 -->
        <div data-role="collapsible" data-content-theme="c">
          <h3>
            Section 4: Collapsed list
          </h3>
          <p>
            Here is an inset list:
          </p>
          <ul data-role="listview" data-inset="true" data-theme="d">
            <li>
              <a href="index.html">Acura</a>
            </li>
            <li>
              <a href="index.html">Audi</a>
            </li>
            <li>
              <a href="index.html">BMW</a>
            </li>
            <li>
              <a href="index.html">Cadillac</a>
            </li>
            <li>
              <a href="index.html">Chrysler</a>
            </li>
            <li>
              <a href="index.html">Dodge</a>
            </li>
            <li>
              <a href="index.html">Ferrari</a>
            </li>
            <li>
              <a href="index.html">Ford</a>
            </li>
          </ul>
        </div>
        <!-- /section 3 -->
      </div>
      <h2>
        Collapsible sets (accordions)
      </h2>
      <p>
        It's possible to combine multiple collapsibles into a grouped set that acts like
        an
        <a href="content-collapsible-set.html">accordion widget</a>
        .
      </p>
    </div>
    <!--/content-primary -->
    <div class="content-secondary">
      <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
        <h3>
          More in this section
        </h3>
        <ul data-role="listview" data-theme="c" data-dividertheme="d">
          <li data-role="list-divider">
            Content Formatting
          </li>
          <li>
            <a href="content-html.html">Basic HTML styles</a>
          </li>
          <li>
            <a href="content-grids.html">Layout grids (columns)</a>
          </li>
          <li>
            <a href="content-grids-responsive.html">Responsive grids</a>
          </li>
          <li data-theme="a">
            <a href="content-collapsible.html">Collapsible content blocks</a>
          </li>
          <li>
            <a href="content-collapsible-set.html">Collapsible sets (accordions)</a>
          </li>
          <li>
            <a href="content-themes.html">Theming content</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- /content -->
  <div data-role="footer" class="footer-docs" data-theme="c">
    <p class="jqm-version">
    </p>
    <p>
      &copy; 2012 jQuery Foundation and other contributors
    </p>
  </div>
</div>
<!-- /page -->

Test runner

Ready to run.

Testing in
Test		Ops/sec
:jqmData	`var select = $(':jqmData(role=page)');`	ready
Attribute Selecotr	`var select = $('[data-role="page"]');`	ready
js	`var test = document.querySelectorAll('data-role'), i, l = test.length, select; for (i = 0; i < l; i += 1) { if (test[i].getAttribute("data-role") === "page") { // test[i].css('color', 'red'); select.unshift(test[i]); } }`	ready
div:jqm	`var select = $('div:jqmData(role=page)');`	ready
div[]	`var select = $('div[data-role="page"]');`	ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

Revision 1: published by t32k on June 15, 2011
Revision 2: published by frequent on December 14, 2012