Question

I want to have a show/hide function for a <div>, using JavaScript/DOM properties.

Using JavaScript onclick() with two buttons, show and hide, each in their own <div>s, it would work something like this:

• By default, the show button is hidden, the main <div> and hide button are displayed. Clicking the hide button hides the main <div> and ‘hide’ button itself, displays the show button.
• Clicking the show button shows the main <div> and ‘show’ button displays the hide button I think this can be achieved using something like document.getElementById(DIVid).style.visibility="hidden".

But how do I do this?

Answer 1

$('#hidebutton').click(function() {
   $('#DIVid, #showbutton').show();
   $(this).hide();
});

$('#showbutton').click(function() {
   $('#DIVid, #hidebutton').show();
   $(this).hide();
});

Or if you want:

$('#hidebutton, #showbutton').click(function() {
    var show = $(this).is('#showbutton');
    $('#DIVid, #hidebutton').toggle(show);
    $('#showbutton').toggle(!show);
});