My JS work with only one id and ignores other (new to JS)

Question

I started to making Java Script with jquery, i need simple code to make my divs hidden and shown by clicking on the link

JS:

    $(document).ready(function(){
    $('#show').click(function() {
    var cname = this.className;
    if ($(cname).is(':visible')) {
    }
    else ($('#cont').is(':visible')) {
        $('#cont').slideToggle('slow');
        $(cname).slideToggle('slow');
    }
    });
});¨

HTML:

            <a class="home" id="show" href="#">Home</a>
            <a class="contact" id="show" href="#">Contact</a>
            <a class="about_us" id="show" href="#">About us</a>



           <div id="cont" class="home" style="Display :visible ;">
           </div>
           <div id="cont" class="contact" style="Display :none ;">
           </div>
           <div id="cont" class="about_us" style="Display :none ;">
           </div>

`Id`s are meant to be unique... You want to use `class` – Ballbin Jun 05 '14 at 16:01 — Ballbin, Jun 05 '14 at 16:01

score 0 · Answer 1 · answered Jun 05 '14 at 16:02

IDs are supposed to be unique, so an ID can only be used on one element. It would seem that you have gotten classes and IDs mixed up, as classes can be used on multiple elements. Your markup should be something like:

<div id="home" class="cont">Home</div>
<div id="contact" class="cont">Contact</div>
<div id="about" class="cont">About</div>

And in your JS you would select $('.cont') instead.

My JS work with only one id and ignores other (new to JS)

1 Answers1