- What You Will Learn
- Defining a Static Site
- Passing and Using Data with Ajax
- Connecting the Country Profiles Page to HTML Data
- Styling the Spry Table
- Creating Spry Regions
- Displaying with a Spry Accordion
- Adding Images and the Country Name
- Refining Page Display Using CSS Styling and Positioning
- What You Have Learned
- Additional Spry Functionality in Dreamweaver CS4
- Additional Resources
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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:
- 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.
- In code view, find this line:
- 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.
- 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).
- 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.
- 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.
- Click Live View to test the page in Dreamweaver, or press F12 to preview it in your browser.
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.
<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.
){kind=small}
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:
)
){kind=small}
)
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