Show/Hide divs by class name

**amean_n** · 08-23-2011, 04:14 AM

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

**vwphillips** · 08-23-2011, 05:08 AM

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>

**amean_n** · 08-23-2011, 05:24 AM

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.

**DracoMerest** · 08-23-2011, 05:50 AM

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>