How Can I Use Css To Show And Hide Multiple Elements At Once?

I found this article that looked like exactly what I wanted, but I can't seem to get it to work at all. Since it is well over a year old, I thought perhaps something may have chan

Solution 1:

Use something like this;

<script>

  $(document).ready(function(){
    //Code goes in here.
  });

</script>

Don't forget to load the jQuery library at the same time from http://jquery.com/

Also, you are going to want to read up on selectors.

Using $("#myElement") will select elements that have an id of "myElement".

Using $(".myElement") will select elements that have a class of "myElement".

So;

<divclass="hideMe">Content</div><divclass="hideMe">Content</div><divclass="hideMe">Content</div><divclass="doNotHideMe">Content</div><inputtype="button"class="ClickMe"value="click me"/><script>

  $(function(){
    $(".ClickMe").click(function(){
      $(".hideMe").hide(250);
    });
  });

</script>

edit

If you want to link to the jquery library online then use;

<scriptsrc="http://code.jquery.com/jquery-1.6.1.min.js"type="text/javascript"></script>

If you download the library and insert the js file into your project then use;

<scriptsrc="/yourPathToTheLibrary/jquery-1.6.1.min.js"type="text/javascript"></script>

Solution 2:

The $ syntax is all part of jQuery. If you wish to use jQuery then somewhere in your code, use a script tag as in your post:

<script>
    $(function() {
        $('.selector').hide(250);
    });
</script>

If you want pure JavaScript, then there is a little more overhead. Not including the document ready stuff (which can be a lot of extra code to do it right...See example: here).

<script>
    elements = document.querySelectorAll('.selector');

    for(int i=0,len=elements.length;i<len;++i) {
        elements[i].style.display = 'none';
    }
</script>

You can put that in a function if you would like. To show the elements set the display attribute to ''.