JQuery/JavaScript If Statement For Two Toggles

I have two toggles (toggle-1 and toggle-2) with different contents in a header. I would like to prevent the user to have both toggles active simultaneously (otherwise they overlap)

Solution 1:

Several issues.

Please study the code below

• too many $(document.ready... and no need to store the result of such a statement
• Using a data-attribute and a common class, shortens the code a lot. DRY Don't repeat yourself
• I simplified the content containers CSS too

$(function() { // on page load
  $('.toggle').on("click", function() { // any of the toggles
    const $wrapper = $(this).closest(".wrapper");
    const id = $(this).data("id");

    $(this).toggleClass('active');      // toggle clicked div 
    const show = $(this).is(".active"); // is it active after we toggled?

    $wrapper
      .find(".toggle")        // find all toggles
      .not(this)              // exclude the one we clicked
      .removeClass("active"); // remove class

    $wrapper.find(".content").hide(); // hide any content divs

    $("#" + id).toggle(show); // show the one belonging to the clicked toggle
  })
})

.container {
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  background-color: #eee;
}

.wrapper {
  background-color: pink;
  position: relative;
  display: flex;
  align-items: center;
}

.toggle {
  display: block;
  width: 20px;
  height: 20px;
  float: left;
  cursor: pointer;
  color: white;
  text-align: center;
  background-color: green;
  margin: 10px;
}

.active {
  background-color: red;
}

.content {
  display: none;
  background-color: white;
  border: 1px solid black;
  position: absolute;
  top: 40px;
}

#div1 {
  left: 0;
}

#div2 {
  left: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

  <div class="wrapper">
    <div class="toggle" data-id="div1">1</div>
    <div id="div1" class="content">
      <p>Some content 1</p>
    </div>

    <div class="toggle" data-id="div2">2</div>
    <div id="div2" class="content">
      <p>Some content 2</p>
    </div>
  </div>
</div>

Solution 2:

Working code:

$(document).ready(function() {
  $('.toggle-1').click(function() {
    if ($('.toggle-2').hasClass('active')) {
      // remove toggle-2 active classes
      $('.toggle-2').removeClass('active');
      $('.toggle-2-content').removeClass('active');
    }
    
    $('.toggle-1').toggleClass('active');
    $('.toggle-1-content').toggleClass('active');
  });
  
  $('.toggle-2').click(function() {
    if ($('.toggle-1').hasClass('active')) {
      // remove toggle-1 active classes
      $('.toggle-1').removeClass('active');
      $('.toggle-1-content').removeClass('active');
    }
    
    $('.toggle-2').toggleClass('active');
    $('.toggle-2-content').toggleClass('active');
  });
});

Here is the link to my working version.

A few things to keep in mind:

1. You don't need to call $(document).ready() multiple times. There's just no reason to call it multiple times on a single page as the event is only fired once.

2. You need to keep track of state somehow; hence the if ($('el').hasClass('classname')) syntax. Once you handle that properly, it's easy to ensure that each element is 'reset' to its original state when the other is clicked.

Hope that helps!

Solution 3:

toggleClass accepts a second boolean parameter that forces the type of toggle, on or off. More than that you can also target multiple elements with a single jQuery call, so use that to your advantage since the classes applied have the same name.

So you could simplify your code to

$(document).ready(function() {
  $('.toggle-1').click(function() {
    $('.toggle-1, .toggle-1-content').toggleClass('active');
    $('.toggle-2, .toggle-2-content').toggleClass('active', false)
  })

  $('.toggle-2').click(function() {
    $('.toggle-2, .toggle-2-content').toggleClass('active');
    $('.toggle-1, .toggle-1-content').toggleClass('active', false)
  })
})

.container {
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  background-color: #eee;
}

.wrapper {
  background-color: pink;
  position: relative;
  display: flex;
  align-items: center;
}

.toggle-1,
.toggle-2 {
  display: block;
  width: 20px;
  height: 20px;
  float: left;
  cursor: pointer;
  color: white;
  text-align: center;
  background-color: green;
  margin: 10px;
}

.toggle-1.active,
.toggle-2.active {
  background-color: red;
}

.toggle-1-content,
.toggle-2-content {
  display: none;
}

.toggle-1-content.active,
.toggle-2-content.active {
  display: block;
  background-color: white;
  border: 1px solid black;
  position: absolute;
  top: 40px;
}

.toggle-1-content.active {
  left: 0;
}

.toggle-2-content.active {
  left: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

  <div class="wrapper">
    <div class="toggle-1">1</div>
    <div class="toggle-1-content">
      <p>Some content 1</p>
    </div>

    <div class="toggle-2">2</div>
    <div class="toggle-2-content">
      <p>Some content 2</p>
    </div>
  </div>

</div>

Solution 4:

You can use the method "removeClass" to remove the active class from the other toggle

var oneToggle = $(document).ready(function() {
    $(".toggle-1").click(function() {
        $(".toggle-1").toggleClass("active")
        $(".toggle-1-content").toggleClass("active")
        $(".toggle-2").removeClass("active")
        $(".toggle-2-content").removeClass("active")
    })
})

var twoToggle = $(document).ready(function() {
    $(".toggle-2").click(function() {
        $(".toggle-1").removeClass("active")
        $(".toggle-1-content").removeClass("active")
        $(".toggle-2").toggleClass("active")
        $(".toggle-2-content").toggleClass("active")
    })
})