www.webdeveloper.com
Results 1 to 6 of 6

Thread: Show/Hide divs by class name

Hybrid View

  1. #1
    Join Date
    Aug 2010
    Posts
    34

    Show/Hide divs by class name

    I have the situation where in the first instance I would like all divs to be visible.

    Only when the user selects something in a select menu the non selected divs will hide.

    I have the following:

    Code:
     <select name="type">
                <option value="ShowAll">1</option>
                <option value="Selection1">1</option>
                <option value="Selection2">2</option>
                <option value="Selection3">3</option>
                <option value="Selection4">4</option>
            </select>
            <div class="Selection1">
                Selection 1
            </div>
            <div class="Selection2">
                Selection 2
            </div>
            <div class="Selection4">
                Selection 4
            </div>
            <div class="Selection3">
                Selection 3
            </div>
            <div class="Selection3">
                Selection 3
            </div>
            <div class="Selection1">
                Selection 1
            </div>

    So, if the user were to select "Selection1" two divs should only be visible. The same will apply for others, if "selection4" is made then only one div would be visible.

    The user will need to the option to reset and display all divs by using the "ShowAll" selector.

    I ahve seen examples of this on the net however, they do not show all the divs in the first instance and they are donhe by ID and not class. I need to do it by class as I have some with the same name and they cannot change.

    I appreciate comments/help

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,667
    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Selection(sel,cls){
     var objs=bycls(cls),z0=0;
     for (;z0<objs.length;z0++){
      objs[z0].style.display=objs[z0].className.indexOf(sel.value)>-1||sel.value=='ShowAll'?'block':'none';
     }
    }
    
     function bycls(nme){
      for (var reg=new RegExp('\\b'+nme+'\\b'),els=document.getElementsByTagName('DIV'),ary=[],z0=0; z0<els.length;z0++){
       if(reg.test(els[z0].className)){
        ary.push(els[z0]);
       }
      }
      return ary;
     }
    
    
    /*]]>*/
    </script></head>
    
    <body>
     <select name="type" onchange="Selection(this,'Selection');" >
                <option value="ShowAll">1</option>
                <option value="Selection1">1</option>
                <option value="Selection2">2</option>
                <option value="Selection3">3</option>
                <option value="Selection4">4</option>
            </select>
            <div class="Selection Selection1">
                Selection 1
            </div>
            <div class="Selection Selection2">
                Selection 2
            </div>
            <div class="Selection Selection4">
                Selection 4
            </div>
            <div class="Selection Selection3">
                Selection 3
            </div>
            <div class="Selection Selection3">
                Selection 3
            </div>
            <div class="Selection Selection1">
                Selection 1
            </div>
    </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/

  3. #3
    Join Date
    Aug 2010
    Posts
    34
    Thank you Vic,

    This works beautifully

    I have an aditional question.

    If I want to change the class names to something more friendly, will I need to alter the JS significantly. I.E

    Code:
         <div class="Selection Eggs">
            Eggs
        </div>
        <div class="Selection Sausages">
            Sausages
        </div>
        <div class="Selection Bacon">
            Bacon
        </div>
        <div class="Selection Eggs">
            Eggs
        </div>
        <div class="Selection Liver">
            Liver
        </div>
    Is the JS currently working with numerical math?

    Thanks.

  4. #4
    Join Date
    Apr 2006
    Location
    Perth
    Posts
    154
    If you are like me and don't understand most of Vic's post, here's one which is relatively
    simple. The logic is as follows:

    get all the DIV objects in the page
    for each of them that have a classname beginning with "Selection"
    if the classname matches exactly the value from the option list
    or
    the option list value is ShowAll
    then make the DIV visible
    else
    hide the DIV.

    Code:
    <html>
     <script type="text/javascript">
      function showHide(which)
       { allDivs=document.getElementsByTagName("DIV");
         for(i=0;i<allDivs.length;i++)
          if(allDivs[i].className.indexOf("Selection")==0)
           if(allDivs[i].className==which || which=="ShowAll")
            { allDivs[i].style.display="block";
            }
           else
            { allDivs[i].style.display="none";
            };
       };
     </script>
     <body>
      <form>
       <select name="type" onchange="showHide(this.value);">
        <option value="ShowAll">All</option>
        <option value="Selection1">1</option>
        <option value="Selection2">2</option>
        <option value="Selection3">3</option>
        <option value="Selection4">4</option>
       </select>
    
    <br>
    
       <div class="Selection1">
        Selection 1
       </div>
       <div class="Selection2">
        Selection 2
       </div>
       <div class="Selection4">
        Selection 4
       </div>
       <div class="Selection3">
        Selection 3
       </div>
       <div class="Selection3">
        Selection 3
       </div>
       <div class="Selection1">
        Selection 1
       </div>
    
      </form>
     </body>
    </html>
    Colin Fiat Simple Solutions To Complex Problems

  5. #5
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,667
    just use eggs, bacon etc as the select list values
    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/

  6. #6
    Join Date
    Aug 2010
    Posts
    34

    :)

    Thanks both

    Managed to get it working with my project cheers

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles