Publishers of technology books, eBooks, and videos for creative people

Home > Articles

  • Print
  • + Share This
From the author of Displaying with a Spry Accordion

Displaying with a Spry Accordion

The country list has been built, and you have tested its ability to take user input and change a detail region. Now you need to create a detail region that will display all the details of the country the user chooses.

To keep the design compact, you can use the area to the right of your table for your detail region. You could just output the variables in your dataset in a list, but Spry has a variety of user interface widgets and effects that allow you to display the data in a way that's more interesting for users. A Spry accordion will allow you to present the details and picture of each country in an eye-catching way without taking up a lot of space. An accordion is a series of panels that expand and collapse to reveal the content of one panel while concealing the content of the other. Follow these steps to add the accordion:

  1. In design view, position your cursor after the closing </p> tag of the Spry detail region you inserted previously. Press Enter to create a space. Choose Insert > Spry > Spry Accordion.
  2. A two-panel accordion set is inserted into the document. In your document code, the files that style and add functionality to the accordion have been referenced. Once you save your changes, copies of them will be moved to your site directory.

    To make the accordion panels dynamic Spry elements, you need to identify the areas you want to be Spry detail regions. Then you can populate the panels with the content you want to display. You will need to work in both design and code view, so you can either toggle between the two or work in split view.

  3. In code view, find this line:
  4. <div class="AccordionPanelContent">

    Now add this code:

    spry:detailregion="ds1"

    Repeat this step for the second div. Figure 28 shows how the code should look now.

  5. Now that you've turned the accordion panels into Spry detail regions, the panels are ready to accept Spry variables that will respond to the user choices in the main Spry region—your table.
  6. In design view, select the text Content 1 in the first accordion panel and delete it. Type the following text into the first panel, pressing Enter (Return) after each line. After typing each line, select the text and make it bold.

    World Region:
    Description:
    Population:
    Local Currency:
  7. Position your cursor at the end of the World Region: line. Press the spacebar to create a blank space; then choose region in the Bindings panel and click the Insert button (see Figure 29).
  8. Repeat step 4 for each of the four elements you have labeled, choosing the appropriate variable from the Bindings panel for each element. Figure 30 shows the result.
  9. Save your changes. Dreamweaver will notify you that it's moving copies of the Spry accordion files into the Spry Assets folder in your site directory, as shown in Figure 31.
  10. Click Live View to test the page in Dreamweaver, or press F12 to preview it in your browser.
  11. The information in the detail region should now respond to your choices in the country table. Click around a bit to test this functionality. Re-sort your table; notice that the details of the selected country don't change. Click the title bar of the second panel (Label 2) and test the accordion functionality.

The accordion adds a nice effect, but we still have a lot of work to do before we can call the page complete. In the remainder of this lesson, we'll make a number of smaller changes to polish up the page:

  • Adding the image and description associated with each country
  • Displaying the selected country name more prominently on the page
  • Replacing the region number with its descriptive title
  • Making some changes to the CSS to bring the display of the page together
  • + Share This
  • 🔖 Save To Your Account