CODEWITHSUNDEEP
javascriptjqueryhtml
sedavidw
sedavidw

Reputation: 11691

Show hidden HTML elements with javascript

I have the following in the <body> of my HTML

<div class="exact">
<div> <a id ="button_some_id" href="#"> Toggle Hidden </a></div>
<div id="item_some_id" hidden>This is hided</div>

<script type='text/javascript'>
$("#button_some_id").click(function() {$("#item_some_id").toggle();});
</script>
</div>

Link to jfiddle

The idea here is I want someone to be able to click on the Toggle Hidden link and it will show some hidden content (and when it is clicked again, hide it). However the javascript is not being triggered. Any help is greatly appreciated

Upvotes: 0

Views: 110

Answers (4)

beingalex
beingalex

Reputation: 2476

You also need to make sure the DOM is loaded. 

$( document ).ready(function() {
    $("#button_some_id").click(function() {$("#item_some_id").toggle();});
});

Upvotes: 0

karem maradona
karem maradona

Reputation: 23

You need to make sure that jQuery is inputted

$(document).ready(function () {
    $("body").on("click", "#button_some_id", function () {
        $("#item_some_id").toggle();
    });
});

Upvotes: -1

IgorAlves
IgorAlves

Reputation: 5540

Try this

//HTML
<div class="toBeHidden" hidden>This is hided</div>



//JS inside your click
if ($(".toBeHidden").is(":visible"))
{
    $(".toBeHidden").hide('slow');
}
else
{
    $(".toBeHidden").show('slow');
}

Upvotes: -2

A.Sharma
A.Sharma

Reputation: 2799

You haven't inputted JQuery or JQuery UI into your JSFiddle's resources. Once putting them in, it works:

https://jsfiddle.net/tj8o8gwf/2/

$("#button_some_id").click(function() {$("#item_some_id").toggle();}); //works fine

Look at the External Resources section on the left hand side of the fiddle.

Upvotes: 4

Related Questions