Adding Collapsible Content & Grids - Exercise

Contact Us or call 1-877-932-8228
Adding Collapsible Content & Grids - Exercise

Adding Collapsible Content & Grids

Duration: 10 to 15 minutes.

In this exercise, you will add collapsible content for the "Eats" page on the Nan & Bob's Online site.

  1. Open WidgetsUI/Exercises/collapsible.html in a file editor.
  2. Add a collapsible-set element to the "Eats" page, allowing users to browse baked goods for sale.
  3. Add a few baked-goods items for purchase; recall that the first HX (<h2>, <h3>, etc.) element found within each collapsible will be used as the label for each accordion element.
  4. Inside each item's collapsible, use a grid to display the item's description on the left and a purchase button on the right.
  5. Label the button with the price of the item, to allow the user to purchase the item; point the button to the #purchaseconfirm dialog, as we did for books in the previous exercise.
  6. Update the "no" button in the #purchaseconfirm dialog to have URL # (instead of pointing to the #books page) and to use data-rel="back", so that we can use this dialog for confirming the user's intent to purchase both "books" and "eats".
  7. Test your work in a mobile browser; the results should look like this: Collapsible exercise



Code Explanation:

We add a div with attribute data-role="collapsible-set" in the "Eats" page, with three collapsible divs, one for each baked good item for purchase. Each item is labeled with an <h3> tag and contains a two-column grid, showing the item description on the left and the purchase button on the right.

We change the "No" button in the confirm dialog to point to the previous page by adding the attribute data-rel="back", effectively becoming a "close" button for the dialog, which allows us to reuse the dialog both for "books" and for "eats".