CODEWITHSUNDEEP
jquerytogglehide
Tom36
Tom36

Reputation: 152

Using Jquery to show/hide Divs

I am trying to hide/show DIV's using Jquery. I want a div to appear when a title is clicked on and then disappear if clicked again (toggle) or disappear if another option is chosen.

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">    </script>

<script>
$(document).ready(function (){
$("a1").click(function(){
    $('#analytical').toggle();
});
});

$(document).ready(function (){
$("a2").click(function(){
    $('#test1').toggle();
});
});

</script>


<div id="personalinfo">
<a1><a class="first">A</a><a>nalytical Skills<a/></a1><br/>
<a2><a class="first">T</a><a>est1<a></a2><br/>
</div>


<div id="analytical">
hello
    </div>

<div id="test1">
    Organisational
    </div>

The first DIV (organisational) does toggle however the following (test1) div doesn't when the relevant option is clicked!

Any help in getting this sorted would be great.

Thanks.

Upvotes: 0

Views: 176

Answers (3)

keshu_vats
keshu_vats

Reputation: 442

Check this in your code nalytical Skills<a/> may this helps you

Upvotes: 0

voigtan
voigtan

Reputation: 9031

I would have changed the html markup so its valid:

<div id="personalinfo">
    <a href="#analytical"><span class="first">A</span>nalytical Skills</a><br/>
    <a href="#test1"><span class="first">T</span>est1</a><br/>
</div>


<div id="analytical">
    hello
</div>

<div id="test1">
    Organisational
</div>

and then:

$(document).ready(function (){
    $("#personalinfo a[href^='#']").on("click", function(e){
        var hash = $(this).attr("href");
        var el = $(hash);
        e.preventDefault();
        el.toggle();
    });
});

it will look up all anchor elements inside #personalinfo with a #hash link and try to toggle the element that has an ID of the hash tag.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388436

Your closing tags was messed up

<div id="personalinfo">
    <a1><a class="first">A</a><a>nalytical Skills</a></a1><br/>
    <a2><a class="first">T</a><a>est1</a></a2><br/>
</div>

Demo: Fiddle

Upvotes: 1

Related Questions