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 14 of 14
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    44
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Cool Show and Hide multiple divides at once

    I have a page that has 26 divides one for each letter A-Z.

    I have the script written so that when you click on the link for one letter it shows that divide and hides the rest. However, I think there has got to be an easier way to do this because the code is so long! It works great but takes forever to write! Does anyone have any suggestions to reduce the size of this code?

    Code:
    Javascript: (Short and simple code)
    function showstuff(divID){
       document.getElementById(divID).style.visibility="visible";
        document.getElementById(divID).style.display="block";
    	window.location.hash="names"; 
    }
    
    function hidestuff(divID){
       document.getElementById(divID).style.visibility="hidden";
       document.getElementById(divID).style.display="none";
    }
    
    HTML: (WHAT A CLUSTER!)
    
    <a href="javascript:showstuff('adivide');hidestuff('bdivide');hidestuff('cdivide');hidestuff('ddivide');">A</a>
    So I have 26 functions being called for each click! There must be a simpler way to do this. Perhaps I can write a function that calls all 25 hidestuff() functions and then I can add the one showstuf().

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    You have one function to which you pass the ID to display and also an array containing all the IDs of the involved divs.
    With that information it knows what to display and what to hide.

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    44
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Logic Ali:

    Thank you for your reply, but I am not sure I understand what you are saying... Please explain.

  • #4
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    Consider this from another thread. while it needs modification to work in your scenario it demonstrates a single function that loops through all of the necessary
    elements and applies one setting to them all, then it applies another setting to the element that called the function:
    Code:
    <script>
     function CLEAR_SUB_SET(subSet){
      var cbs = subSet.parentNode.getElementsByTagName("input");
      for(c = 0; c < cbs.length; ++c )
      {
         cbs[c].checked = false;
       }
      subSet.checked = true;
      }
    
    </script>
    
    <form>
     <input type="checkbox" name="other_chk"" />   <!-- Not Affected by script -->
    
     <div id="RadioChecks">
      <input type="checkbox" name="sub_chk1" onclick="CLEAR_SUB_SET(this);" />
      <input type="checkbox" name="sub_chk2" onclick="CLEAR_SUB_SET(this);" />
      <input type="checkbox" name="sub_chk3" onclick="CLEAR_SUB_SET(this);" />
     </div>
    </form>

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    44
    Thanks
    12
    Thanked 0 Times in 0 Posts
    I was trying to link both funtions into one...

    showstuff(adivide)
    If divide equals adivide, then display
    else
    hide.

    That would mean I just change the function for each letter and it would only need one function per click. I just cannot get it to do that! grrr

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I don't know what "names" is, but this is what I would do:

    Code:
    <!DOCTYPE html>
    <html>
      <head>
      <title>blank</title>
        <meta charset="UTF-8">
    </head>
    
    <body>
    <style>
    .hide{
    display:none;
    }
    </style>
    
    <div class="hide" name="mydiv" id="adivide">A</div>
    <div class="hide" name="mydiv" id="bdivide">B</div>
    <div class="hide" name="mydiv" id="cdivide">C</div>
    <div class="hide" name="mydiv" id="ddivide">D</div>
    
    <script type="text/javascript">
    
    function showstuff(divID){
    els=document.getElementsByName('mydiv')
    for (var i = 0; i < els.length; i++) {
    els[i].style.visibility="hidden";
    els[i].style.display="none";
     }  
       document.getElementById(divID).style.visibility="visible";
        document.getElementById(divID).style.display="block";
    	window.location.hash="names"; 
    }
    
    </script>
    <a href="javascript:showstuff('adivide')">A</a>
    <a href="javascript:showstuff('bdivide')">B</a>
    <a href="javascript:showstuff('cdivide')">C</a>
    <a href="javascript:showstuff('ddivide')">D</a>
    </body>
    </html>

  • Users who have thanked xelawho for this post:

    Chrys (09-27-2011)

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    or simpler (being that you're only ever going to show one div at a time):

    Code:
    <!DOCTYPE html>
    <html>
      <head>
      <title>blank</title>
        <meta charset="UTF-8">
    </head>
    
    <body>
    <style>
    .hide{
    display:none;
    }
    </style>
    
    <div class="hide" id="adivide">A</div>
    <div class="hide" id="bdivide">B</div>
    <div class="hide" id="cdivide">C</div>
    <div class="hide" id="ddivide">D</div>
    
    <script type="text/javascript">
    var shownDiv;
    function showstuff(divID){
    if (shownDiv){
    document.getElementById(shownDiv).style.visibility="hidden";
    document.getElementById(shownDiv).style.display="none";
     }  
       document.getElementById(divID).style.visibility="visible";
        document.getElementById(divID).style.display="block";
    	window.location.hash="names"; 
    	shownDiv=divID;
    }
    
    </script>
    <a href="javascript:showstuff('adivide')">A</a>
    <a href="javascript:showstuff('bdivide')">B</a>
    <a href="javascript:showstuff('cdivide')">C</a>
    <a href="javascript:showstuff('ddivide')">D</a>
    </body>
    </html>

  • Users who have thanked xelawho for this post:

    Chrys (10-08-2011)

  • #8
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    Code:
    <script>
     function SWITCH_CONTENT(subSet){
      subSet = document.getElementById(subSet);
      var cbs = subSet.parentNode.getElementsByTagName("div");
      for(c = 0; c < cbs.length; ++c ){
       cbs[c].style.display = 'none';
       }
      subSet.style.display = 'block';
      }
    
    </script>
    <style>
    .hidden{
    display:none;
    }
    </style>
    <body>
     <div id="something" ></div>   <!-- Not Affected by script -->
    
     <div id="MyContainer">
    
      <div id="sub1" class="hidden">sample 1</div>
    
      <div id="sub2" class="hidden">sample 2</div>
    
      <div id="sub3" class="hidden">sample 3</div>
    
      <a href="javascript:SWITCH_CONTENT('sub1');">show 1</a>
      <a href="javascript:SWITCH_CONTENT('sub2');">show 2</a>
      <a href="javascript:SWITCH_CONTENT('sub3');">show 3</a>
    
     </div>
    </body>

  • #9
    New Coder
    Join Date
    Aug 2011
    Posts
    44
    Thanks
    12
    Thanked 0 Times in 0 Posts
    xelawho:

    That is exactly what I was looking for! Thank you so much for your reply!!!

    PS("names" is simply an anchor on the page where I want the screen to jump to onlick.)

    To all others: Thank you very much for your thoughts and replies!

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    you're welcome. I don't know if you say the code I posted in #7, but I prefer it - instead of looping through all the divs and hiding them whether they are hidden or not, it just hides the one that was showing already. Which seems better to me, but any of the solutions posted will suit your needs

  • #11
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts

    Another solution

    Another solution might be basing your two types of elements on different css classes (those clicked to show divides and the divides) and attaching events from javascript based on css class, thus keeping the html code clean from events...

    You will have slightly more javascript but cleaner code seperation.

    In the example below I've replaced your a-tags with spans, since a-tags are a bit problematic in that the already "do something" even before you assign events to them.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <style>
    .showDivide {cursor:pointer}
    .divide {display:none}
    </style>
    <script>
    onload = function(){
      
      var getElementsByClassName = function(className){
        var els = document.getElementsByTagName('*'), filtered = [];
        className = ' ' + className + ' ';
        for(var i = 0; i < els.length; i++){
          (' ' + els[i].className + ' ').indexOf(className) >= 0 && filtered.push(els[i])
        };
        filtered.each = function(func){
          var ar = this;
          for(var i = 0; i< ar.length; i++){
            func.apply(ar[i]);
          }
         };
        return filtered;
      };
      
      var divides = getElementsByClassName('divide');
      var showDivides = getElementsByClassName('showDivide');
      
      showDivides.each(function(){
        this.onclick = function(){
          var idToShow = this.innerHTML.toLowerCase().replace(/\s/g,'') + 'divide';
          divides.each(function(){
            this.style.display = this.id == idToShow ? 'block' : ''
          });
        }
      });
      
    };
    </script>
    </head>
    <body>
    
    <span class="showDivide">A</span>
    <span class="showDivide">B</span>
    <span class="showDivide">C</span>
    
    <div class="divide" id="adivide">Albert<br/>Ali<br/>Allman</div>
    <div class="divide" id="bdivide">Bert<br/>Boris<br/>Bret</div>
    <div class="divide" id="cdivide">Ceasar<br/>Cecil<br/>Cecilia</div>
    
    </body>
    </html>
    Last edited by ironboy; 09-27-2011 at 08:40 PM.

  • #12
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    @ironboy that's pretty neat. Are there any incompatibility issues associated with that technique?

  • #13
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Nope

  • #14
    New Coder
    Join Date
    Aug 2011
    Posts
    44
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Internet Explorer Doesn't work in IE

    Any ideas on how I can make this work in IE as well?? It is a code that shows a divide on click and then hides the rest at the same time.

    live code is also at chryscreations.com/ns/boynames.html

    Javascript:
    Code:
    function showstuff(divID)
    	{
    		els=document.getElementsByName('mydiv')
    		for (var i = 0; i < els.length; i++)
    		{
    			els[i].style.visibility="hidden";
    			els[i].style.display="none";
    		}  
    		document.getElementById(divID).style.visibility="visible";
    		document.getElementById(divID).style.display="block";
    	}
    HTML
    Code:
    <head>
    <script>
    	window.onload=function()
    	{
    		showstuff('');
    	}
    </script>
    </head>
    
    <body>
    <a href="javascript:showstuff('adivide')">A</a>  
    <a href="javascript:showstuff('bdivide')">B</a>
    <div name="mydiv" id="adivide">
    </div>
    <body>


  •  

    Posting Permissions

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