CODEWITHSUNDEEP
javascriptcss
Bhavin Shah
Bhavin Shah

Reputation: 2482

Show One Div and Hide Another Div when Click on button

What I want to do is, when I click on button then one div should disappear and another should appear and if i click on the same button one more time, then first one should appear and second one should disappear. This would go until I click on the button.

What I tried:

JavaScript:

function change_image(){
    var flag = true;
    if(flag){
        document.getElementById('speaker_main_div_with_rounded_image').style.display="none";
        document.getElementById('speaker_main_div_with_square_image').style.display="block";
        flag = false;
    } else {
        document.getElementById('speaker_main_div_with_rounded_image').style.display="block";
        document.getElementById('speaker_main_div_with_square_image').style.display="none";
        flag = true;
    }
}

HTML:

<input type="button" value="Click Here to get another image" onClick="change_image(this)">

Any help would be grateful.

Thank You.

Upvotes: 0

Views: 3529

Answers (2)

Arpit Svt
Arpit Svt

Reputation: 1203

This is my solution using jQuery Library .

    <!DOCTYPE html>
    <html>
       <head>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script>
             $(document).ready(function(){
             	$("#btn1").click(function(){
             		$("#div1").toggle();
             		$("#div2").toggle();
             	});
             });
          </script>
          <style>
             .hide{
             display:none;
             }
          </style>
       </head>
       <body>
          <button type="button" id="btn1">Toggle</button>
          <div id ="div1">
             I am div 1
          </div>
          <div id ="div2" class="hide">
             I am div 2
          </div>
       </body>
    </html>

Upvotes: 1

Lo&#239;c
Lo&#239;c

Reputation: 580

Your flag variable is local, and its value is always the same when function is called. Initialize it with:

var flag = document.getElementById('speaker_main_div_with_rounded_image').style.display !== 'none';

Upvotes: 2

Related Questions