Moving Spry Collapsible Panels over to jQuery is actually a lot easier than I thought it would be.
Just to give you a bit of background, Spry is a javascript library that comes with Dreamweaver. They really pushed it to start with, but haven’t updated it since 2006, so to say that it’s a bit long in the tooth is an understatement in web terms. JQuery on the other hand is the javascript library of choice and in the latest version of Dreamweaver, also seems to be pushed over Spry.
However if you have already included Spry on your page, you may just want to keep the existing html markup exactly the same and swap over to a jQuery system. I did this with an admitted simple single panel system (used for dropping down a form), as below: –
1. Add jQuery into your page. I’ve used an old version and am pulling this off Google servers as follows
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js” type=”text/javascript”></script>
2. Remove Spry javascript code from your page.
3.Create a new javascript file and add the following code
$(document).ready(function() {
$(‘.CollapsiblePanelContent’).hide();
$(‘.CollapsiblePanelTab’).click(function() {
$(‘.CollapsiblePanelContent’).slideToggle(‘medium’);
if ($(‘.CollapsiblePanelContent’).is(‘:visible’)) {
$(this).val(‘Hide’);
} else {
$(this).val(‘Show’);
}
});
});
4. Link to this new file in your document (and below where you add in the jQuery file).