Javascript for a class to display: none, if a tab class is open or close

**Rik Blues** · Feb 10, 2013 20:38

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:

HTML 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:

HTML Code:

.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!

**Pullo** · Feb 12, 2013 01:41

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:

HTML Code:

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:

HTML Code:

<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:

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.

**Rik Blues** · Feb 18, 2013 04:05

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.

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;" 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.

**Rik Blues** · Feb 18, 2013 04:49

EDIT:

This is the HTML code:

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!

**Pullo** · Feb 18, 2013 05:21

Hi there,

Glad you liked it

Two points about your original code:

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.

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.

**Rik Blues** · Feb 18, 2013 07:59

Wow! This is so amazing! I've furnished my navigation menu, thanks much for your tips and help.

. You're amazing!!!

User Tag List

Thread: Javascript for a class to display: none, if a tab class is open or close

Thread Tools

Display

Javascript for a class to display: none, if a tab class is open or close

Thank you and yet another followup q

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions