Question

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! I hope this question is clear and understandable. 🙂

Answer 1

I’m not familiar with the hooks you can use in Spry, but you could functions like this:

function clickPlus() {
    document.getElementById("openButton").style.display = "none";
    document.getElementById("closeButton").style.display="inline";
}

function clickMinus() {
    document.getElementById("openButton").style.display = "inline";
    document.getElementById("closeButton").style.display="none";
}

And on your spans do something like this:

<span id="openButton" onclick="clickPlus();">+</span>
<span id="closeButton" onclick="clickMinus();">-</span>

This all assumes that you start off with specifying display:none; in your css for closeButton.

EDIT: I changed the code to be a bit more specific, and noted the requirement for display:none; in the css