jQuery Mobile - Collapsible Theme


To set a collapsible theme, you can use data-theme attribute and add data-content-theme attribute with a theme swatch letter specified. You can set data-content-theme to false in order to avoid default inherit of collapsible content.

Default jQuery Mobile theme includes multiple swatches like a, b, c, d and e. A swatch is a unified color concept, which governs many things like color, background, text, and more. These swatches can be applied to individual objects.


Following example demonstrates the use of collapsible theme in jQuery Mobile.

<!DOCTYPE html>
      <title>Collapsible Theme</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      <div data-role = "collapsible" data-theme = "b" data-content-theme = "b">
         <p>Hi! This is collapsible content with a themed block of content set to "b".</p>

      <div data-role = "collapsible" data-content-theme = "false">
         <p>Hi! This is collapsible content without a theme.</p>


Let's carry out the following steps to see how the above code works −

  • Save the above html code as collapsible_theme.html file in your server root folder.

  • Open this HTML file as http://localhost/collapsible_theme.html and the following output will be displayed.

Kickstart Your Career

Get certified by completing the course

Get Started