Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool Using separate expand/collapse links with <DIV> tags

    Hello!

    I'm new to javascripting and have been browsing around to find a good article that would give me good instructions on how to build an expand/collapse script with <DIV> tags. My main goal is to be able to click on two separate links to expand and collapse the paragraph below my article. One expand link will be on top, and then having the choice to collapse the paragraph from a link on the bottom. I've been using a script that just allows me to expand/collapse the paragraph with the "toggle" function but with one click.

    Here is the script I'm currently running

    Code:
    <head>
    <script type="text/javascript">
    function toggle(obj) {
    var obj=document.getElementById(obj);
    if (obj.style.display == "block") obj.style.display = "none";
    else obj.style.display = "block";
    }
    </script>
    </head>
    
    <body>
    Article body info
    
    <a onclick="toggle('m1')" href="javascript: void(0);">Expand/Collapse Notes</a>
    
    <div style="display: none;" id="m1"> 
    <div><p>this is the paragraph that is expanded/collapsed or I should say my study notes nested in a DIV tag</p>
    </div>
    </div>
    </body>
    Any help would be much appreciated!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    Sorry, I'm lost.

    Do you mean you want to be able to *EITHER* expand or collapse from BOTH links?

    If so, just duplicate your <a> link toggler.

    And it's a minor thing, but this is better:
    Code:
    <a onclick="toggle('m1'); return false;" href="#">Expand/Collapse Notes</a>
    If you mean you want SEPARATE expand and collapse links, each doing only one action, pleas say so.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,145
    Thanks
    38
    Thanked 505 Times in 499 Posts
    My guess ...
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function expand(obj) {
      document.getElementById(obj).style.display = 'block';
    }
    function collapse(obj) {
      document.getElementById(obj).style.display = 'none';
    }
    </script>
    <style type="text/css">
    .hide { display:none; }
    .show { display:block; }
    .rightSide { float:right; }
    </style>
    </head>
    
    <body>
    Article body info
    
    <a onclick="expand('m1');return false" href="#">Expand Notes</a>
    <blockquote class="hide" id="m1"> 
     <p>
      this is the paragraph that is expanded/collapsed or I should say my study notes nested in a DIV tag
      <p> <a href="#" onclick="collapse('m1');return false" class="rightSide"> Collapse Notes </a>
     </p>
    </blockquote>
    </body>
    </html>
    Remove class="rightSide" if you don't like anchor on the extreme right side.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    Well, yeah, but if it's that simple, why bother with functions?
    Code:
    <a onclick="document.getElementById('m1').style.display='block';return false" href="#">Expand Notes</a>
    <blockquote class="hide" id="m1"> 
     <p>
      this is the paragraph that is expanded/collapsed or I should say my study notes nested in a DIV tag
      <p> <a href="#" onclick="document.getElementById('m1').style.display='none';return false" class="rightSide"> Collapse Notes </a>
     </p>
    </blockquote>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    Hey Old Pedant & jmrker,

    Thanks for the response!

    You both got me in the right direction and the getElementById works great for having two functions act independently on their own. However, when I click on the collapse link, it causes the page to shoot toward the bottom like I've triggered an anchor to send it to it's target of the footer of the page?!? I do have a lot more info below where I will have the same effect with the paragraphs; I've checked all of my code. All the DIV tags are closed, etc., and the site is displaying correctly.

    I did do some searching before I got an answer and found this small snippet of code that used a <table> layout and ended up changing it a little to my liking...

    Code:
    <html>
    <head>
        <script language="JavaScript" type="text/javascript">
    <!--
    function ec(h) {
      var doc = document.getElementById('doc');
      doc.style.display = h;
    }
    // -->
    </script>
    </head>
    
    <p>some text before ...</p> 
     
    <a href="javascript:ec('block')">...expand notes</a>
    
    <div id=doc name=doc style="overflow:hidden;display:none;">
    the hidden text
    
    <a href="javascript:ec('none')">[collapse]</a>
    </div>
    
    <p>Some text after ...</p>
    Then I used the examples given here provided by both of you and it shoots me to the very top of the page, at the beginning of the article?? Any ideas why it might be doing this? I'm assuming it's because of the "return true" statement in the anchor. As a matter of fact, I can call "return false" and it still shoots me to the very top of the page.

    Thanks again for you the help!

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,145
    Thanks
    38
    Thanked 505 Times in 499 Posts
    Show the full code that you are currently using
    or a link to a live page to see the problem.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    I showed you the correct way to use an <a> tag for this purpose.

    The use of href="javascript:..." is obsolete and discouraged.

    Code:
    <a href="#" onclick="ec('block'); return false;">...expand notes</a>
    Or, if all your onclick functions *DO* return false:
    Code:
    <script type="text/javascript">
    function ec(h) {
      var doc = document.getElementById('doc');
      doc.style.display = h;
      return false;
    }
    </script>
    ...
    <a href="#" onclick="return ec('block');">...expand notes</a>
    Further:

    -- language="..." in a <script> block is long obsolete. Don't use it.
    -- the need for <!-- and //--> in <script> blocks disappeared when MSIE 3 died, about 1997 or 1998
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    Oh...and finally: There's really no reason you *HAVE* to use <a> tags for this, you know.

    Again, the need to do so died when MSIE 5 appeared. About 2001 or so.

    Code:
    <span onclick="ec('block');">...expand notes</span>
    or
    <div onclick="ec('block');">...expand notes</div>
    will work just fine and you don't have to worry about return.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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