I am working on a collapsible panel menu. Everything is looking great except for the title in the collapsible panel tab. So, here’s what I’m trying to do, if the collapsible panel content is open, I want the collapsible panel tab to show a specific span class. For example, it will show a minus or (-) sign if it is open. And if it is close, it will show a plus or (+) sign.
Here’s the code:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">
<span class="closedmenu">+</span>
<span class="openmenu">-</span>
</div>
<div class="CollapsiblePanelContent">
<ul>
<li><a href="LINK1urlHERE">LINK1titleHERE</a></li>
<li><a href="LINK2urlHERE">LINK2titleHERE</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
</script>
Or, if the collapsible panel content is open, I would like the class .closedmenu to have a css of display:none. And if the collapsible panel content is closed, the class .openmenu to have a css of display:none.
In css, the idea is like:
.CollapsiblePanelOpen .CollapsiblePanelTab {
.closedmenu {display:none;} }
.CollapsiblePanelClosed .CollapsiblePanelTab {
.openmenu {display:none;} }
But of course, this does not work. So, I think a javascript is needed.
I need a very simple answer to this one, if anyone can, please. Thank you!
Good morning,
Welcome to the forums 
What you need to do here is use the openClass constructor option to give your open panels a specific class:
var ac1 = new Spry.Widget.CollapsiblePanel("cp1",{contentIsOpen:true, duration:200, openClass:'open'});
Then you can put an empty <span> element before the panel content:
<div class="CollapsiblePanelTab"><span class="menuState"></span>Panel 1</div>
Finally on page load you iterate over all of the panels and insert a plus or a minus sign into the <span> depending on whether it has a class of open or not.
You also have to attach an onclick handler to do the same thing.
Here’s a demo.
And here’s the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Spry CollapsiblePanel</title>
<script language="JavaScript" type="text/javascript" src="http://adobe.github.com/Spry/includes/SpryData.js"></script>
<script language="JavaScript" type="text/javascript" src="http://adobe.github.com/Spry/widgets/collapsiblepanel/SpryCollapsiblePanel.js"></script>
<link href="http://adobe.github.com/Spry/widgets/collapsiblepanel/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#cp1 .CollapsiblePanelContent {
overflow: scroll;
height: 300px;
}
.CollapsiblePanel {
width: 300px;
}
.menuState{
padding:3px;
}
</style>
</head>
<body>
<div class="CollapsiblePanel" id="cp1">
<div class="CollapsiblePanelTab" tabindex="0"><span class="menuState"></span>Panel 1</div>
<div class="CollapsiblePanelContent">
Content for Panel 1 goes here!<br />
Content for Panel 1 goes here!<br />
Content for Panel 1 goes here!<br />
Content for Panel 1 goes here!<br />
Content for Panel 1 goes here!<br />
Content for Panel 1 goes here!<br />
Content for Panel 1 goes here!<br />
Content for Panel 1 goes here!<br />
Content for Panel 1 goes here!<br />
Content for Panel 1 goes here!<br />
Content for Panel 1 goes here!<br />
Content for Panel 1 goes here!<br />
Content for Panel 1 goes here!<br />
Content for Panel 1 goes here!<br />
Content for Panel 1 goes here!<br />
Content for Panel 1 goes here!<br />
Content for Panel 1 goes here!<br />
Content for Panel 1 goes here!<br />
Content for Panel 1 goes here!<br />
Content for Panel 1 goes here!<br />
Content for Panel 1 goes here!<br />
Content for Panel 1 goes here!<br />
Content for Panel 1 goes here!<br />
</div>
</div>
<div class="CollapsiblePanel" id="cp2">
<div class="CollapsiblePanelTab" tabindex="0"><span class="menuState"></span>Panel 2</div>
<div class="CollapsiblePanelContent">
Content for Panel 2 goes here!<br />
Content for Panel 2 goes here!<br />
Content for Panel 2 goes here!<br />
Content for Panel 2 goes here!<br />
Content for Panel 2 goes here!<br />
Content for Panel 2 goes here!<br />
Content for Panel 2 goes here!<br />
Content for Panel 2 goes here!<br />
Content for Panel 2 goes here!<br />
Content for Panel 2 goes here!<br />
Content for Panel 2 goes here!<br />
</div>
</div>
<div class="CollapsiblePanel" id="cp3">
<div class="CollapsiblePanelTab" tabindex="0"><span class="menuState"></span>Panel 3</div>
<div class="CollapsiblePanelContent">
Content for Panel 3 goes here!<br />
Content for Panel 3 goes here!<br />
Content for Panel 3 goes here!<br />
</div>
</div>
<div class="CollapsiblePanel" id="cp4">
<div class="CollapsiblePanelTab" tabindex="0"><span class="menuState"></span>Panel 4</div>
<div class="CollapsiblePanelContent">
Content for Panel 4 goes here!<br />
Content for Panel 4 goes here!<br />
Content for Panel 4 goes here!<br />
Content for Panel 4 goes here!<br />
Content for Panel 4 goes here!<br />
Content for Panel 4 goes here!<br />
Content for Panel 4 goes here!<br />
Content for Panel 4 goes here!<br />
Content for Panel 4 goes here!<br />
Content for Panel 4 goes here!<br />
Content for Panel 4 goes here!<br />
Content for Panel 4 goes here!<br />
</div>
</div>
<div class="CollapsiblePanel" id="cp5">
<div class="CollapsiblePanelTab"><span class="menuState"></span>Panel 5</div>
<div class="CollapsiblePanelContent">
Content for Panel 5 goes here!<br />
Content for Panel 5 goes here!<br />
Content for Panel 5 goes here!<br />
Content for Panel 5 goes here!<br />
Content for Panel 5 goes here!<br />
</div>
</div>
<script language="JavaScript" type="text/javascript">
var ac1 = new Spry.Widget.CollapsiblePanel("cp1",{contentIsOpen:true, duration:200, openClass:'open'});
var ac2 = new Spry.Widget.CollapsiblePanel("cp2",{contentIsOpen:false, duration:200, openClass:'open'});
var ac3 = new Spry.Widget.CollapsiblePanel("cp3",{contentIsOpen:false, duration:200, openClass:'open'});
var ac4 = new Spry.Widget.CollapsiblePanel("cp4",{contentIsOpen:false, duration:200, openClass:'open'});
var ac5 = new Spry.Widget.CollapsiblePanel("cp5",{contentIsOpen:false, duration:200, openClass:'open'});
function updatemenuState(el){
if((el.parentNode.className).match(/open/)){
el.firstChild.innerHTML = "-";
} else {
el.firstChild.innerHTML = "+";
}
}
window.onload=function(){
var ac=document.getElementsByClassName("CollapsiblePanelTab");
for (i=0; i<ac.length; i++){
updatemenuState(ac[i]);
ac[i].onclick=function(){
updatemenuState(this);
}
}
}
</script>
</body>
</html>
I hope that helps. It should work in all modern browsers.
Just let me know if you have any questions.
Good morning/evening!
Wow! Thank you very much! Exactly what I’d been looking for. I’ve just read this one, but I should have seen this and thanked you for the great effort earlier.
Anyway, I was testing the panels and I have yet another question: what should I do to close the content panel if the mouse leaves the panel content?
I have used this [ html below ], but the problem is, the panel collapses or closes when I move the mouse out of the tab. What I’m trying to do is for the collapsible panel content to open onmouseover the tab, then the panel will close onmouseout the content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onmouseover="CollapsiblePanel1.open(); return false;" onmouseout="CollapsiblePanel1.close(); return false;">Tab</a></div>
<div class="CollapsiblePanelContent">Content</div>
</div>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", { contentIsOpen: false });
</script>
</body>
</html>
Any help would be appreciated. Thanks again. Please let me know however way I can return the favor!
PS. Not sure if I am supposed to open another thread for this one.
EDIT:
This is the HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onmouseover="CollapsiblePanel1.open(); return false;" >Tab</a></div>
<div class="CollapsiblePanelContent" onmouseout="CollapsiblePanel1.close(); return false;">
<ul>
<li><a href="http://yahoo.com/">Yahoo</a></li>
<li><a href="http://squidoo.com/">Squidoo</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", { contentIsOpen: false });
</script>
</body>
</html>
The problem is: if the content’s content is pure text, the panel doesn’t automatically close when I move the mouse, which is good. But, if I put a link or something in the panel content, the panel closes when I move the mouse. I hope this makes sense.
Thanks!
Hi there,
Glad you liked it
Two points about your original code:[LIST=1]
[]You don’t need the return false; as you are responding to a mouseover/mouseout event, not to clicking on the panel.
[]Inline JavaScript is obtrusive and can become hard to maintain when your code grows.
[/LIST]So, I have made a new demo and hopefully that does what you want. Check out the source code to see what I have done and post back here if there is anything you don’t understand.
Wow! This is so amazing! I’ve furnished my navigation menu, thanks much for your tips and help. :). You’re amazing!!!