How can I use CSS to show and hide multiple elements at once?

Question

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 changed, or that there might be a simpler way to do it by now.

That is to say, I cannot get the method I linked above to work. I copied and pasted exactly, and used <body onLoad="javascript_needed()"> because I wasn't sure where $(document).ready(function ()... was supposed to go. I am, sadly, quite unfamiliar with Javascript.

Are you including the jQuery library on the page? http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery#Setup — Jon Adams, Sep 14 '11 at 23:57

griegs · Accepted Answer · 2011-09-15T00:19:44.733

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;

<div class="hideMe">Content</div>
<div class="hideMe">Content</div>
<div class="hideMe">Content</div>
<div class="doNotHideMe">Content</div>

<input type="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;

<script src="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;

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

edited Sep 15 '11 at 00:19

answered Sep 14 '11 at 23:56

griegs

22,624
33
128
205

I really am unfamiliar with all things java. How do I make sure I load the JQuery library? – Jerry Sep 15 '11 at 00:09
Oh and make sure the link is either in your master page if you have one, or at the top of the page before your javascript code. – griegs Sep 15 '11 at 00:21
@Jerry Rowe, JavaScript really has nothing to do with Java. It is a separate language altogether. It is based on ECMAScript. At the core, JS is really closer to Scheme. A book I read described it as `Scheme in C's clothing`. – jyore Sep 15 '11 at 03:13
I just spent some hours reading up on javascript and stuff. What you said about selectors was THE thing I needed to see. The . instead of the # made the difference for me. ++ for you!! Your links and stuff were very helpful, and this was exactly what I needed. – Jerry Sep 15 '11 at 07:38

score 0 · Answer 2 · edited May 23 '17 at 12:12

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 ''.

How can I use CSS to show and hide multiple elements at once?

2 Answers2

Linked