Getting Spry Accordion Panels to Open on Mouseover
In the Dreamweaver Spry widgets, one of them is a collapsible accordion, giving panels of content hidden within the page.
By default, the panels are set to open on click, but like seen on the Apple site, this can be changed so the panels open when the tabs are moused over.
Getting this to work is quite straight-forward, you just need to open the SpryAccordion.js file and go straight to line 288. You will find this:
Change "click" to "mouseover"
Change the eventListener to “mouseover” so your new line reads:
Spry.Widget.Accordion.addEventListener(tab, “mouseover“, function(e) { return self.onPanelTabClick(e, panel); }, false);
Save it and upload.
If you want to have your page load so all the panels are closed, go to the bottom of your main page code and add this before the closing </body> tag:
<script type=”text/javascript”>
<!–
var Accordion1 = new Spry.Widget.Accordion(“Accordion1”, { useFixedPanelHeights: false, defaultPanel: -1 });
//–>
</script>
Damn, that sound’s so easy if you think about it.
Hi,
This function is great. However, this solution closes the tab on mouseout. I’d like to keep the panel tab open while I navigate through the content (which is created with ul with each li attached to different pages). Then I’d like to close the tab (with animation) when I click on another tab. Is there a way to achieve this?
Many thanks,
Hi Bernadette
Check your code. I used the same on the testimonials in my sidebar here: http://www.designermagic.co.uk and it all works on all browsers.
Thanks for getting back so quickly. My code looks just like what you’ve indicated above, yet on mouseout the tab closes by itself (and I’m not even hovering over the next tab which is what your testimonials page does):
var self = this;
Spry.Widget.Accordion.addEventListener(tab, “mouseover”, function(e) { return self.onPanelTabClick(e, panel); }, false);
Spry.Widget.Accordion.addEventListener(tab, “mouseover”, function(e) { return self.onPanelTabMouseOver(e, panel); }, false);
Spry.Widget.Accordion.addEventListener(tab, “mouseout”, function(e) { return self.onPanelTabMouseOut(e, panel); }, false);
I should point out that my accordion panel has only one tab that has content but the rest of the tabs don’t have any. Instead each of those tabs are linked to another html page. In other words, Tab 1 has contents with ul, and Tab 2, 3 & 4 have no contents but when clicked (directly on the tab) each direct you to a new page. In that instance the accordion panel animation is broken and appears like the Tab 1 is collapsing. Hope this makes sense… Is there a workaround this?
Thanks in advance for your help!
Can you send me a link to your page, or zip a copy and email it to info @ designermagic.co.uk (no spaces) and I’ll have a look at it on Tuesday.
I put in the code for the panel to be closed when loading page. It worked, however, when I mouse over the tab, panel doesn’t open.
What am i doing wrong?