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 4 of 4
  1. #1
    qaa
    qaa is offline
    New Coder
    Join Date
    Jun 2011
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts

    div show/hide all

    Code:
    <html>
    <head>
    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
    <script type="text/javascript">
    function showonlyone(thechosenone) {
    var noticecontent = document.getElementsByTagName("div");
    for(var x=1; x < noticecontent.length; x++) {
    name = noticecontent[x].getAttribute("name");
    if (name == 'noticecontent') {
    if (noticecontent[x].id == thechosenone) {
    noticecontent[x].style.display = 'block';
    }
    else {
    noticecontent[x].style.display = 'none';
    }
    }
    }
    }
    </script>
    
    </head>
    <body>
    <center>
    <div id="parentdiv">
    <div id="expandall">OPEN/CLOSE ALL</div>
    <div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div>
    <div id="noticecontent1" name="noticecontent"  class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div>
    <div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div>
    <div id="noticecontent2" name="noticecontent"  class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div>
    <div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div>
    <div id="noticecontent3" name="noticecontent"  class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div>
    </div>
    </center>
    </body>
    </html>


    can anyone help on "OPEN/CLOSE ALL" to show or hide all .noticecontent divs

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <html>
    <head>
    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
    <script type="text/javascript">
    function showonlyone(thechosenone) {
    var noticecontent = document.getElementsByTagName("div");
    for(var x=1; x < noticecontent.length; x++) {
    name = noticecontent[x].getAttribute("name");
    if (name == 'noticecontent') {
    if (noticecontent[x].id == thechosenone) {
    noticecontent[x].style.display = 'block';
    }
    else {
    noticecontent[x].style.display = 'none';
    }
    }
    }
    }
    function showall(id) {
     showall.ud=showall.ud||false;
     var i=1;
     while (document.getElementById(id+i)){
      document.getElementById(id+i).style.display=showall.ud?'block':'none';
      i++;
     }
     showall.ud=!showall.ud;
    }
    </script>
    
    </head>
    <body>
    <center>
    <div id="parentdiv" >
    <div id="expandall" onmouseup="showall('noticecontent')" >OPEN/CLOSE ALL</div>
    <div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div>
    <div id="noticecontent1" name="noticecontent"  class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div>
    <div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div>
    <div id="noticecontent2" name="noticecontent"  class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div>
    <div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div>
    <div id="noticecontent3" name="noticecontent"  class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div>
    </div>
    </center>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    qaa (07-20-2011)

  • #3
    qaa
    qaa is offline
    New Coder
    Join Date
    Jun 2011
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips View Post
    Code:
    <html>
    <head>
    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
    <script type="text/javascript">
    function showonlyone(thechosenone) {
    var noticecontent = document.getElementsByTagName("div");
    for(var x=1; x < noticecontent.length; x++) {
    name = noticecontent[x].getAttribute("name");
    if (name == 'noticecontent') {
    if (noticecontent[x].id == thechosenone) {
    noticecontent[x].style.display = 'block';
    }
    else {
    noticecontent[x].style.display = 'none';
    }
    }
    }
    }
    function showall(id) {
     showall.ud=showall.ud||false;
     var i=1;
     while (document.getElementById(id+i)){
      document.getElementById(id+i).style.display=showall.ud?'block':'none';
      i++;
     }
     showall.ud=!showall.ud;
    }
    </script>
    
    </head>
    <body>
    <center>
    <div id="parentdiv" >
    <div id="expandall" onmouseup="showall('noticecontent')" >OPEN/CLOSE ALL</div>
    <div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div>
    <div id="noticecontent1" name="noticecontent"  class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div>
    <div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div>
    <div id="noticecontent2" name="noticecontent"  class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div>
    <div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div>
    <div id="noticecontent3" name="noticecontent"  class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div>
    </div>
    </center>
    </body>
    </html>


    thanks

  • #4
    qaa
    qaa is offline
    New Coder
    Join Date
    Jun 2011
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts
    how can i turn this in jQuery?

    Code:
    <script type="text/javascript">
    function showonlyone(thechosenone) {
    var noticecontent = document.getElementsByTagName("div");
    for(var x=1; x < noticecontent.length; x++) {
    name = noticecontent[x].getAttribute("name");
    if (name == 'noticecontent') {
    if (noticecontent[x].id == thechosenone) {
    noticecontent[x].style.display = 'block';
    }
    else {
    noticecontent[x].style.display = 'none';
    }
    }
    }
    }
    function showall(id) {
     showall.ud=showall.ud||false;
     var i=1;
     while (document.getElementById(id+i)){
      document.getElementById(id+i).style.display=showall.ud?'block':'none';
      i++;
     }
     showall.ud=!showall.ud;
    }
    </script>


  •  

    Posting Permissions

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