SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Location
    Baguio City, Philippines
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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!

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Feb 2013
    Location
    Baguio City, Philippines
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Thank you and yet another followup q

    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.

  4. #4
    SitePoint Member
    Join Date
    Feb 2013
    Location
    Baguio City, Philippines
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    Glad you liked it

    Two points about your original code:
    1. You don't need the return false; as you are responding to a mouseover/mouseout event, not to clicking on the panel.
    2. 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.

  6. #6
    SitePoint Member
    Join Date
    Feb 2013
    Location
    Baguio City, Philippines
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow! This is so amazing! I've furnished my navigation menu, thanks much for your tips and help. . You're amazing!!!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •