jQuery Mobile - Collapsible Theme

Description

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.

Example

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

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <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>
   </head>
   
   <body>
      <div data-role = "collapsible" data-theme = "b" data-content-theme = "b">
         <h4>Heading</h4>
         <p>Hi! This is collapsible content with a themed block of content set to "b".</p>
      </div>

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

Output

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.

jquery_mobile_widgets.htm

Kickstart Your Career

Get certified by completing the course

Get Started