How do I show/hide div tags with jQuery?
Objective:
Have 2 links, when one is click the corresponding div is opened. When the other link is clicked, the new div opens and the old one closes.
When clickign a link to open the div, clickign again should close it.
I have the following code, allowing one or the other div to be displayed, however I cannot get the div to close again once opened.
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
$(".hidden").toggle();
$(".trigger").click(function()
{
$(".hidden").hide();
});
$(".trigger").toggle(function()
{
$(this).addClass("active");
},
function ()
{
$(this).removeClass("active");
});
$(".trigger").click(function()
{
$(this).next(".hidden").toggle();
});
});
</script>
<a class="trigger">Menu</a>
<div class="hidden">
This was hidden under the menu
</div>
<br>
<a class="trigger">Search</a>
<div class="hidden">
This was hidden under the search
</div>