Toggle div on link click

Question

http://jsfiddle.net/FsCHJ/2/

what now happens is, whenever I have another link example it will also use this link as the toggle button. I just want Toggle Edit Mode to be toggling hidden div's on/off. So I tried to change $("a").click(function () to $("toggle").click(function () and <a>Toggle Edit Mode</a> to Toggle Edit Mode`, but doesn't work. Any idea's?

HTML

<li><a>Toggle Edit Mode</a>

</li>
<div class="hidden rightButton">hello</div>

CSS

.hidden {
    display: none;
}
.unhidden {
    display: block;
}

JS

$(document).ready(function () {
    $("a").click(function () {
        $("div").toggleClass("hidden unhidden");
    });
});

Answer 1

You want this.

<li><a class="toggle">Toggle Edit Mode</a>

$(".toggle").click(function () {
    $("div").toggleClass("hidden unhidden");
}

You cannot use $("toggle"), because this looks for the html tag <toggle>. Instead add a class toggle to the link for which you want to toggle.

Answer 2

Use "ID" selector.

http://jsfiddle.net/FsCHJ/1/

There can be many classes (class=...) in one page but juste on id (id=...) per page. More informations here.

---

Javascript:

$(document).ready(function () {
    $("#toggle").click(function () {
        $("div").toggleClass("hidden unhidden");
    });
});

Html:

<li><a id="toggle">Toggle Edit Mode</a></li>

<div class="hidden rightButton">hello</div>

$(document).ready(function () {
    $("#toggle").click(function () {
        $("div").toggleClass("hidden unhidden");
    });
});

.hidden {
    display: none;
}
.unhidden {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<li><a id="toggle">Toggle Edit Mode</a></li>

<div class="hidden rightButton">hello</div>