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,171
28
45

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

score 0 · Answer 3 · answered Jun 09 '23 at 16:42

I would i like to suggest a more stable method, so you could add however much "divs". The basic gist of the code is to make a function that iterates from the list obtained. The list consists of the "screen-content" that wants to be alternatively be shown.

const divs = Array.from(document.querySelectorAll(".screen-content"));
    const previousBtn = document.getElementById("previous-btn");
    const nextBtn = document.getElementById("next-btn");
    
    previousBtn.addEventListener("click", showPreviousContent);
    nextBtn.addEventListener("click", showNextContent);
    
    divs.forEach((div, index) => {
      if (index !== 0) {
        div.classList.add("hide");
      }
    });
    
    let currentIndex = 0;
    divs[currentIndex].classList.remove("hide");
    
    function showPreviousContent() {
        divs[currentIndex].classList.add("hide");
        currentIndex = (currentIndex - 1 + divs.length) % divs.length;
        divs[currentIndex].classList.remove("hide");
    }
    
    function showNextContent() {
        divs[currentIndex].classList.add("hide");
        currentIndex = (currentIndex + 1) % divs.length;
        divs[currentIndex].classList.remove("hide");
    }

.hide{
        display: none;
    }

    <div class="screen-content">first</div>
    <div class="screen-content">second</div>
    <button id="previous-btn" style="height:50px; width:50px"></button>
    <button id="next-btn" style="height:50px; width:50px"></button>

Toggle between display of 2 divs

3 Answers3