Toggle between display of 2 divs

Question

I am trying to learn jquery and I have 2 div elements that I want only with one button to toggle between hide and show. I tried to write everything that I want but I think the sintax is wrong.

<div id="first"></div>
<div id="second">
</div>
<button class="change">change</button>

CSS:

  #first {
    width:500px;
    height:500px;
    margin:0 auto;
    background-color:#ccc;
  }
  #second {
    width:500px;
    height:500px;
    margin:0 auto;
    background-color:black;
    display:none;
  }

and I wrote as Jquery

$(document).ready(function() {
    $('.change').click(function() {
      $('#first').hide();
      $('#second').show();
    });
  });

I was thinking about an if else statement however I am not sure if can handle that yet.

You need a way to check if the div is hidden. Then, you can toggle if one is hidden or not. — Davin Tryon, Feb 20 '19 at 17:13
Possible duplicate of [toggle show/hide div with button?](https://stackoverflow.com/questions/4528085/toggle-show-hide-div-with-button) — Dexygen, Feb 20 '19 at 17:18

tanaydin · Accepted Answer · 2019-02-20T21:41:09.897

3

You can use toggle method of jQuery. Make your second div hidden on initialisation...

$(document).ready(function() {
    $('.change').click(function() {
        $('#first, #second').toggle();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first">first</div>
<div id="second" style="display: none;">second</div>
<button class="change">change</button>

working example: https://jsfiddle.net/tanaydin/kjyq0eow/3/

documentation: http://api.jquery.com/toggle/

edited after: @Darren Sweeney's comment, much better with this selector.

edited Feb 20 '19 at 21:41

answered Feb 20 '19 at 17:17

tanaydin

5,002
26
44

Wow it was that easy, I understand now! Thank you very much for your help! – Neagu Claudiu Alexandru Feb 20 '19 at 17:29
Done! Sorry did not know that you have to do it. – Neagu Claudiu Alexandru Feb 22 '19 at 19:30
not me, you :) and you don't have to. but it is for good karma :) – tanaydin Feb 25 '19 at 16:10

score 0 · Answer 2 · answered Feb 20 '19 at 17:20

First thing, you won't see emptys divs.

Example - 1

$(document).ready(function() {
    $('.change').click(function() {
      $('#first').toggle();
      $('#second').toggle();
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first" style="display: none">teste</div>
<div id="second">teste2</div>
<button class="change">change</button>

Example - 2 You can check if a element is visible with that:

$(document).ready(function() {
    $('.change').click(function() {
      if($('#first').is(":visible")){
      $('#first').hide();
      $('#second').show();
      }else{
      $('#first').show();
      $('#second').hide();
      }
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first">test1</div>
<div id="second">test2</div>
<button class="change">change</button>

You can use `$('#first, #second').toggle();` in your first example — StudioTime, Feb 20 '19 at 17:24

Toggle between display of 2 divs

2 Answers2