jQuery Mobile - Collapsible Set


You can apply a series of individual collapsibles and it allows you to open multiple rows at once. The border of the collapsible can be customized by providing custom CSS.


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

<!DOCTYPE html>
      <title>Collapsible Set</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">
         <ul data-role = "listview">
            <li><a href = "#">Audi A4</a></li>
            <li><a href = "#">Audi Q3</a></li>
            <li><a href = "#">Audi R8</a></li>
      <div data-role = "collapsible">
         <ul data-role = "listview">
            <li><a href = "#">XUV 500</a></li>
            <li><a href = "#">Scorpio</a></li>
            <li><a href = "#">Xylo</a></li>
      <div data-role = "collapsible">
         <ul data-role = "listview">
            <li><a href = "#">Verna</a></li>
            <li><a href = "#">i20</a></li>
            <li><a href = "#">Elantra</a></li>


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

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

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

Kickstart Your Career

Get certified by completing the course

Get Started