how to add a function so a button will make a div disapear/appear?

Question

I created a function in javascript that makes a div appear by clicking a button, but i want the same button to make it dissapear after the second click and so on.

JAVASCRIPT

<script>
function show( elem )
{
    $('.dynamic_link').hide();
    $('#'+elem).show();
}
</script>

HTML

<a href="#" onclick="show('link1')" id="buton"><p> BUTTON</p></a>
    <div id="link1" class="dynamic_link" style="display:none;">
        <h1>SHOWING SOMETHING</h1>
    </div>

What sould i change in the main function or add another function, so the button would do the magic? Thanks.

Answer 1

Use the jQuery function toggle() or slideToggle() .

Like this:

$('#button').click(function(){
    $('#link1').toggle();
});

Answer 2

Use like this while calling your javascript function

document.getElementById("link1").style.display='';
document.getElementById("link1").style.display='none';

Answer 3

Follow this example:

HTML:

<div id='content'>Hello World</div>
<input type='button' id='hideshow' value='hide/show'>

jQuery:

jQuery(document).ready(function(){
    jQuery('#hideshow').live('click', function(event) {        
        jQuery('#content').toggle('show');
    });
});

For more info: jQuery Toggle