How to Hide/Show a Div When a Button Is Clicked

How to display div after click the button in Javascript?

HTML Code:

<div id="welcomeDiv"  style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />

Javascript:

function showDiv() {
   document.getElementById('welcomeDiv').style.display = "block";
}

See the Demo: http://jsfiddle.net/rathoreahsan/vzmnJ/

toggle show/hide div with button?

Look at jQuery Toggle

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 versions of jQuery 1.7 and newer use

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

For reference, kindly check this demo

How can I hide a div until a button is clicked?

You need to set display to block (or something else) but not hide when button is clicked!

function TestsFunction() {    var T = document.getElementById("TestsDiv");    T.style.display = "block";  // <-- Set it to block}

<button onclick="TestsFunction()">Tests</button>
<div id="TestsDiv" style="display:none">    tests here!</div>

Show Div by clicking on button, hide others

You just need to show the current div first on button click like:

function showOne(id) {    $('#' + id).show();    $('.hide').not('#' + id).hide();}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button type="button" onclick="showOne('1')">Europe</button><br><button type="button" onclick="showOne('2')">USA</button><div class='hide' id='2'>About USA</div><div class='hide' id='1'>About Europe</div>

Show and hide divs when click button

The JS toggle function is good for toggling classes on and off.

Here's a simple example

let btn = document.getElementById("btn-login");
let div = document.getElementById("loglog");

btn.addEventListener("click", () => {
    div.classList.toggle('hide');
})

.hide {
  display: none;
}

<button id="btn-login">Unshow/show</button>
<div id="loglog">Stuff to unshow on button click and show on the next button click</div>

How to show hidden div onclick of button and hide when not in focus using JS

you can use this code :

function openCardsList() {
    let window = document.getElementById("anchor-cards-list");
    window.style.display = "block";
  }
  function hideDiv(){
    let window = document.getElementById("anchor-cards-list");
    window.style.display = "none";
  }

and add onclick event to parent div

div onclick="hideDiv()" style="height: 100vh;">
  <div class="collapse" id="anchor-cards-list">Lorem Ipsum</div>
</div>

Toggling the class of a div to show/hide content based on which button is clicked

You can try this:

change css

    .active {
display: block;
}

.hidden {
display: none;
}

.menu-container {
margin-top: 15px;
display: flex;
justify-content: space-evenly;
}

The html part

<div class="menu-container">

            <div class="menu-preview">
                <div class="menu-preview-items active most-popular">

                    <h2>Most Popular</h2>

                    <div class="menu-listing">
                        <h3>California Roll (8 Pieces)</h3>
                        <p>Imi crab, cucumber, avocado, and mayo with
                            sesame</p>
                        <p>$3.50</p>
                    </div>

                    <div class="menu-listing">
                        <h3>Dynamite Roll (8 Pieces)</h3>
                        <p>Two pieces prawn tempura, yam, cucumber,
                            avocado, masago, letters, and mayo with sesame</p>
                        <p>$4.95</p>
                    </div>

                </div>

                <div class="menu-preview-items hidden appetizers">

                    <h2>Appetizers</h2>

                    <div class="menu-listing">
                        <h3>Edamame</h3>
                        <p>Boiled green soy bean with salt.</p>
                        <p>$3.50</p>
                    </div>

                    <div class="menu-listing">
                        <h3>Gomae</h3>
                        <p>Blanched spinach with sesame seed and peanut sauce.</p>
                        <p>$3.50</p>
                    </div>

                </div>
            </div>

            <div class="menu-categories">
                <a href="#" class="menu-box" ref="most-popular">Most Popular</a>

                <a href="#" class="menu-box" ref="appetizers">Appetizers</a>

                <a href="#" class="menu-box">A La Carte</a>

                <a href="#" class="menu-box">BBQ</a>

                <a href="#" class="menu-box">Salad & Soup</a>

                <a href="#" class="menu-box">Tempura</a>

            </div>

        </div>

Now the JQuery

$('.menu-categories .menu-box').on('click',function(){
      $('.menu-preview-items').addClass('hidden');
      $('.menu-preview-items').removeClass('active');
      $('.'+$(this).attr('ref')).removeClass('hidden');
      $('.'+$(this).attr('ref')).addClass('active');
    });

Show/Hide div element on button click

Use ng-click. In your ng click you switch value from variable display. The directive ng-show / ng-hide work on css. If you need remove element from the DOM use ng-if instead of ng-show

$scope.display = true;
$scope.switch = function(){
    $scope.display =! $scope.display;
}

HTML

<div class="margin-bottom hidden-xs" ng-show="display"></div>

<button class="btn btn-primary btn-xs" ng-click="switch()">Click me !</button>

or if you don't need javascript.