Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In our previous exercise, we placed our Accordion widget on the page and then populated the panels with different items from our Data Set. While we were successful in doing that, we need to establish a relationship between the Spry Table on the left hand side of the page and our Accordion. So the Accordion will update whenever someone clicks on an element in our Spry Table. To do that, we have got to do a little bit of hand coding and actually we don't even really have to hand code it. We can do that directly here in Design View. So if you are following along with me, we are still working on the current exercise file and we are going to do our Image panel first. So go ahead and expand your Image panel and if you need to refresh on how to do that, if you click on the panel, if it is close, you will see a Visibility icon on the right hand side, just open that up or you can select the entire Accordion widget and then using the Properties inspector click on the appropriate label. So I am going to click inside the panel. That is very important. When you do that, your Tag Selector is going to display a list of tags of course, and we are inside an Accordion panel. So you want to make sure you click inside the panel, so this paragraph, it says dsShow Media, I am going to click right inside that to make sure that I get inside the panel.
Now, it is actually advantageous that I clicked in this because we need to go ahead and assign this a class while we are at it. So, go down to your Tag Selector and find the P Tag, simply either right click or if you are on a Mac, Ctrl+Click and choose Quick Tag Editor, our paragraph tag will come up and let's just type in class = 'media.' That our media class style hasn't been written yet, but it is going to drive how this styles later on, so we want to go ahead and do that now since we are here. Now just to the left of that, you will find a tag that says div.Accordionpanel content. Now this is where we need to establish a relationship between this content and the Spry Table that we placed on the page earlier. So make sure that you are affecting the divAccordionpanel Content tag. Once again, you want to right click or if you are on a Mac, Ctrl+Click and bring up the Quick Tag Editor for the Accordion panel content div tag.
Now we are not going to modify any existing attributes. We are going to add another one so in the Quick Tag Editor, I am going to click just after the class attribute and add a space. I will type in S and that's going to code hint for me all these different Spry regions that I can do. So I want to type in the word Spry and I can just go ahead and click on d and it will jump down my Spry list so I have chosen content default. I am going to scroll down this list and what I am looking for is the detail region. So spry:detailregion and I will hit Return and when I do that, it will finish typing that out for me. So it says spry:detailregion and then I have a value. Now, it is expecting to hear a Data Set from me, so I am going to type in dsShow and remember that's our Data Set for our Spry Table. So I am going to go ahead and click on that and that identifies this panel content as being a detailed region of that set.
As you remember, when we defined the table, we had the update detail region checkbox that we checked so that we could enable this type of functionality. So I will click Enter again and I will go ahead and make that Edit to my tag. Now you also may notice that in the Tag Selector now, our tag is orange. Anytime that you click inside of an element that contains a Spry code, Dreamweaver is going to highlight that tag for you in orange so that's a really good indicator that there is either a repeat region or a detailed region or just a generic Spry region inside that content. We need to go ahead and add that same detail region functionality to our description as well. The note from the author isn't going to change. We don't need to do that for that one but we do need to do the same thing for the second panel. So I am going to scroll down and select my second panel and open that up and remember, I can click anywhere inside the content, so I don't really have to have it highlighted.
Once again, I am going to go down to my Tag Selector and I am looking specifically for the divAccordionpanel content so that's the class I am looking for. I will either right click or Ctrl +Click that. I will choose Quick Tag Editor and once again, I will just add the attribute and I will type in s for Spry and I will just mouse down until I get to detailregion and then I will type in dsShow and hit Enter. And remember, I will always hit Enter twice so that it gets applied. Once again, you should see that orange highlighting indicating that Spry content has been added to this region. Okay, we will go ahead and save that and it is time to go ahead and preview this in our browser. So we will preview this in our browser and I will scroll down and you can see, oh, we have an image displaying here and if I click on a different painting, I see a different image show up and it is pulling that of course, from the external Data Set.
If I click on the painting information, that tab will come up and as I click I can see that those descriptions change and if I click on Note from the Artist, the Note from the Artist displays as well. So our Accordion widget is working. It is maybe not quite as pretty as we wanted it to be. So in the next exercise, we will take a look at controlling the look and feel of your Accordion widget by working with CSS.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.