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? docs.jquery.com/Tutorials:Getting_Started_with_jQuery#Setup — Jon Adams
– Jon Adams, Commented Sep 14, 2011 at 23:57

griegs · Accepted Answer · 2011-09-15 00:19:44Z

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, 2011 at 0:19

answered Sep 14, 2011 at 23:56

griegs

22.8k33 gold badges132 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jerry Over a year ago

I really am unfamiliar with all things java. How do I make sure I load the JQuery library?

griegs Over a year ago

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.

jyore Over a year ago

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

Jerry Over a year ago

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.

Community · Accepted Answer · 2017-05-23 12:12:00Z

0

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

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Sep 15, 2011 at 0:23

jyore

4,8452 gold badges23 silver badges26 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related