在链接点击上切换div

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> 

Answer 3

Use .className selector:

$(".toggle").click(function () {});

You can also use jQuery's toggle function.

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

Created fiddle to demonstrate toggle .

Answer 4

This worked for me. Allowing me to show or hide text with the same link. I associate the link with the div i want to show. This works in lists with multiple records, each record having it's own ID.

<a class="showHideToggle div1">View Details</a>
<div id="div1" style="display:none;">Record 1 details goes here</div>

<a class="showHideToggle div2">View Details</a>
<div id="div2" style="display:none;">Record 2 details goes here</div>

<script>
    $(document).ready(function () {
        $(".showHideToggle").click(function (ctl) {
            var linkedDivName = $(this).attr('class').replace('showHideToggle ', '');
            var divToToggle = $("#" + linkedDivName);
            //alert('current status: ' + divToToggle.css('display'));

             if (divToToggle.css('display') == 'none') {
                divToToggle.css("display", "block");
                $(this).text("Hide Details");
            } else {
                divToToggle.css("display", "none");
                $(this).text("Show Details");
            }
        });
    });
</script>