CODEWITHSUNDEEP
javascriptjqueryhtmlcss
MOTIVECODEX
MOTIVECODEX

Reputation: 2752

Toggle div on link click

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");
    });
});

Upvotes: 2

Views: 22601

Answers (4)

JJ_Coder4Hire
JJ_Coder4Hire

Reputation: 4891

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>

Upvotes: 0

Fabien Sa
Fabien Sa

Reputation: 9480

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>

Upvotes: 4

Venkata Krishna
Venkata Krishna

Reputation: 15112

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.

Upvotes: 7

R. Oosterholt
R. Oosterholt

Reputation: 8080

Use .className selector:

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

You can also use jQuery's toggle function.

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

Created fiddle to demonstrate toggle.

Upvotes: 2

Related Questions