CODEWITHSUNDEEP
javascriptjquery
patiss
patiss

Reputation: 155

Adding show/hide to my div tags

so I got 4 div tags, with id's - content1; content2; content3 and content4. at start, content1 is only shown, and all other 3 contents are invisible, and I got menu with links, #content1, #content2, #content3, #content4.
So I need to create, when somebody clicks for example on content3 link, current content will hide and content3 content will show up, same to all other contents.

My question - I know how to make show/hide with one element, but I haven't created anything with 2 or more elements, so maybe you could help me create it?

Upvotes: 0

Views: 259

Answers (2)

nnnnnn
nnnnnn

Reputation: 150010

If you give your content divs a class, say "content", it is easy to select them as a group and hide them. Similarly, if you give your menu links a class you can assign a click handler to all of them at once. So:

<a class="menu" href="#content1">Content 1</a>
<div class="content" id="content1">Some content here</div>
<!-- and so forth for your other links and divs -->

<script>
   $(function() {
       $("a.menu").click(function() {
          $("div.content").hide();
          $(this.href).show();
          return false;
       });
   });
</script>

Note that you don't really need to wrap the code in a document.ready handler if the script block appears after the elements in question, but I've done so here for completeness.

I realise the above may not correspond to your html markup, but since you didn't actually provide your html markup I had to guess...

If there's anything in this answer that you don't understand I suggest you read through some jQuery tutorials, such as this one from the jQuery website; a tutorial is beyond the scope of a StackOverflow answer...

Upvotes: 1

Ayman Safadi
Ayman Safadi

Reputation: 11552

Per @Robin's suggestion, check this out:

Upvotes: 0

Related Questions