SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Collapsible Panel

    Hi all.

    I am a newbie to Javascript and I have found this code for collapsible panels which works great, however i would like the panel to begin collapsed rather then expanded when the page is loaded. Can anyone help please? thank you in advance.

    HTML Code:
    <html>
    <head>
        <style type="text/css">
        .squarebox {
            width: 100%;
            border: solid 1px #336699;
            text-align: center;
            overflow: hidden; }
        .squareboxgradientcaption {
            color: #ffffff;
            padding: 5px;
            background-image: url(../images/gradient_blue.png);
            background-repeat: repeat-x; }
        .squareboxcontent {
            background-color: #f5f5f5;
            padding: 10px;
            overflow: hidden;
            border-top: solid 1px #336699; }
        </style>
        <script language="javascript" type="text/javascript">
        function togglePannelStatus(content)
        {
            var expand = (content.style.display=="none");
            content.style.display = (expand ? "block" : "none");
            var chevron = content.parentNode
                .firstChild.childNodes[1].childNodes[0];
            chevron.src = chevron.src
                .split(expand ? "expand.gif" : "collapse.gif")
                .join(expand ? "collapse.gif" : "expand.gif");
        }
        </script>
    </head>
    <body>
    <!-- Collapsible panel, with separate CSS and JavaScript -->
    <div style="width:170px;">
        <div class="squarebox"><div
         class="squareboxgradientcaption"
         style="height:20px; cursor: pointer;"
         onclick="togglePannelStatus(this.nextSibling)"><div
             style="float: left">Title goes here...</div><div
             style="float: right; vertical-align: middle"><img
             src="../images/collapse.gif" width="13"
             height="14" border="0"
             alt="Show/Hide" title="Show/Hide" /></div>
            </div><div class="squareboxcontent">
                <img width="150" height="100"
                 src="../images/sample_photo.jpg"
                 alt="This is an image" title="This is an image" /><br />
                 Content goes here...
            </div>
        </div>
        <img width="170" height="20" alt="" src="../images/shadow.gif" />
    </div>
    </body>
    </html>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ssmith7153 View Post
    I have found this code for collapsible panels which works great, however i would like the panel to begin collapsed rather then expanded when the page is loaded
    You could add "display: none" to the inline style that you already have there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    That worked, thank you.

    However, now on initial load up the panel requires 2 clicks to expand it. once it has been initially expanded one click closes it and opens it. why does it need 2 clicks initially and is there a way to fix it?

    thank you again for all your help.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ssmith7153 View Post
    However, now on initial load up the panel requires 2 clicks to expand it. once it has been initially expanded one click closes it and opens it. why does it need 2 clicks initially and is there a way to fix it?
    Most likely due to the display:none being in the wrong place.

    Try it here:

    Code html4strict:
    <div class="squareboxcontent" style="display: none;">
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    If you let is know where you found that code, we could also put efforts to converting it into more stable and easier to modify code.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Spot on, thank you.

    I put the display: none in the css block at the top of the page. Its quite amazing that putting it there causes you to have to click twice but putting it in the main block corrects it. Why does that happen?

    I used the tutorial at this website;

    http://xtractpro.com/articles/Animat...ble-Panel.aspx

    thank you again, its great to know there are people out there with the answers.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ssmith7153 View Post
    Spot on, thank you.

    I put the display: none in the css block at the top of the page. Its quite amazing that putting it there causes you to have to click twice but putting it in the main block corrects it. Why does that happen?
    Because the element.style object relates to the inline styles. There's a completely separate and not very cross-compatible way to access the computed styles, and the stylesheets themself. Quite frankly it's a mess.

    We can work around it though by adjusting what the script looks for.

    The elements style could be "" or "none" when it's closed.
    It can only be "block" when it's open, so we can check for that instead, and use ! to invert the result.

    Code javascript:
    var expand = !(content.style.display=="block");
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Oh yes, I forgot to add that having it closed by default from the CSS stylesheet guarantees that anyone who is not using JavaScript won't be able to see it.

    For such reasons, it's often better to use scripting to close such elements instead, which also neatly resolves the trouble with the element.style object.

    If you want to go that way just let us know.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so as it is, people not using javascript wont be able to see the expanded content?

    I definatly need a solution for that please?

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ssmith7153 View Post
    so as it is, people not using javascript wont be able to see the expanded content?

    I definatly need a solution for that please?
    Okay, this requires running some script after the page content is available. It's not possible to run the script directly from the head, because at that particular time nothing below it exists yet.

    It's possible to use window.onload or other domcontentready events, but this is where we can make good use of the best-practice technique where you put scripts at the bottom of the page. Just before the </body> tag.

    First we need scripting to obtain a reference to the element. That can easily be done if there's a unique identifier, but with a class name things get a bit trickier.

    Some web browsers natively support getElementsByClassName while others don't. One technique is to provide a completely separate getElementsByClassName function, and a simpler technique is to loop through your DIVs looking for one who's class name matches what we're after.

    I'll use the simpler technique here since there's no point in adding three times the scripting code if it's only going to be used just the once.

    Code javascript:
    var divs = document.getElementsByTagName('div'),
        divsLen = divs.length,
        div,
        i;
    for (i = 0; i < divsLen; i += 1) {
        if (divs[i].className === 'squareboxcontent') {
            div = divs[i];
            break;
        }
    }
    div.style.display = 'none';

    Remove that added css style, put in the above script at the end of your body (a script reference to an external script file is preferred, instead of inline scripting), just before the </body> tag, and you'll be all good to go.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    something strange is happening!

    I have 3 collapsible panels on the page.

    it works perfectly when javascript is turned off, it displays the expanded content. However, when javascript is turned back on it has the first one collapsed but the second and third and expanded?

    thank you again for your time

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Okay, when dealing with multiple elements things have to be done a little bit differently.

    Here's an update to the script.

    Code javascript:
    var divs = document.getElementsByTagName('div'),
        divsLen = divs.length,
        div,
        i;
    for (i = 0; i < divsLen; i += 1) {
        div = divs[i];
        if (div.className === 'squareboxcontent') {
            div.style.display = 'none';
        }
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow, your amazing. that worked perfectly. thank you so much.


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
  •