Using Dreamweaver and Spry for Collapsable Divs
Yesterday I wrote an article on using jQuery to create a collabsable div effect. Now if you are like me and are not a javascript kind of person yet then in Dreamweavers CS3 you can use what is called a Spry Collapsable Panel to acheive a similar effect with a few simple clicks and changes to a CSS (Cascading Style Sheet) file you can get the desired result. Check out this simple example here.
I am going to start this example with a new blank page, but this could quite easily be inserted into an existing page or template. With your page open go to the insert menu at the top and select the Spry Collapsable Panel (see below).
You will then see something like this inserted onto the page.
As a default the Panel is set to be displayed in an OPEN State so if you have a look at the Property Inspector you will notice that you can change this state to CLOSED. Go ahead and Save the file now and you will notice that you will be asked to Copy the Dependant Files.
If you know take a look in Code View you will notice that Dreamweaver has inserted some div elements on the page that correspond to the CSS File that is located in the Spry Assets Folder. Open up the CSS File that is placed in the SpryAssets Folder you will see that the file is fully commented and easy to understand! which is what we want.
Ok, what if you want to change the speed at which the Panels Open?. Well if you open the javascript file that is also located in the SpryAssets Folder and go down to Line 341 you will see a line that says
this.duration = 500;
Play around with this value and you will notice the speed go faster or slower. This setting is in milli seconds and the higher the number the slower the speed and vice versa.
If you liked this article you may want to check out the Spry Navigation Bar Article I wrote as well.
Daniel Anderson
Budding Spry Expert
Don’t Want to Miss a Tip or Article? Why not Sign Up for the Weekly Blog and Web Design Tips Newsletter.
You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.
June 17th, 2008 at 11:37 pm
ever been successful in creating Links from other pages to open collapsible panels on another webpage? I am trying to cross-link collpasible panels from different pages.
July 3rd, 2008 at 2:44 am
[...] View the tutorial from Dreamspot.com View Live Demo [...]
July 31st, 2008 at 11:00 am
We currently have custom collapsable div’s on our site - and they aren’t able to be used by contribute CS3 end users to edit text within them on any given page. So, I am wondering if you know whether using dreamweaver and spry in CS3 to generate the collapsable divs (instead of using the custon ones would make contribute recognize them?