how to make a button on click to hide and show to boxes at once

Question

I need to find a solution for the following problem: I need to create a button that on click will make at once one visible block to hide and another hidden block to be visible. Any suggestion?

Thank you in advance, Cheers Valter

Here you go: http://www.plus2net.com/javascript_tutorial/hide-layer2.php — Jatin, Mar 27 '15 at 03:38
Or may be this: http://stackoverflow.com/questions/21070101/show-hide-div-using-javascript — Jatin, Mar 27 '15 at 03:40

score 0 · Answer 1 · edited May 23 '17 at 12:22

Here is an example of how you could do that.

HTML

<button id="btnUpdate">Update</button>
<div class="type1">type 1</div>
<div class="type1">type 1</div>
<div class="type2 hidden">type 2</div>
<div class="type2 hidden">type 2</div>

JavaScript

$(function () {
    $('#btnUpdate').on('click', function () {
        event.preventDefault();
        $('.type1').hide();
        $('.type2').show();
    });
});

CSS

.hidden {
    display: none;
}

Demo: http://jsfiddle.net/BenjaminRay/d58erzqL/

I've used .hide() and .show(), but you could also use .toggle() or manually add/remove the hidden class with .addClass('hidden') and .removeClass('hidden'). You could also go with native JavaScript functionality and try this: https://stackoverflow.com/a/21070237/4669143

There are many options.

how to make a button on click to hide and show to boxes at once

1 Answers1