Hide all div elements except one by toggling them at the same position

Question

Hide all div elements except one by toggling them at the same position

I’m diving into the world of jQuery and facing some challenges with the .toggle() function.

My goal is to have multiple <div> elements displayed in the same position, but only one visible at a time. When a new <div> is opened, the previous one should automatically close. Here's my current HTML setup:

$(document).ready(function() {
  $("#button1").click(function() {
    $("#box1").toggle(1000);
  });
});
$(document).ready(function() {
  $("#button2").click(function() {
    $("#box2").toggle(1000);
  });
});

.container {
  width: 90px;
}

.box1 {
  background-color: green;
  color: red;
  display: none;
}

.box2 {
  background-color: blue;
  color: yellow;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class=box1 id=box1>
    This is Box 1
  </div>

  <div class=box2 id=box2>
    This is Box 2
  </div>
</div>

<a href="#" id="button1">Box1</a>
<a href="#" id="button2">Box2</a>

Furthermore, I believe that using just one toggle() function instead of four would be more efficient for what I want to achieve. However, attempting to apply the same function across different IDs or classes isn't working as expected. What am I overlooking or doing incorrectly in this scenario?

javascript jquery html css toggle

Answer 1

Answer №1

Typically, you can utilize a single document ready function.

To simplify, you could implement a single click function to manage your toggles. As you are utilizing trigger links, it is important to have a way to identify the target box. Adding an additional attribute like target-box with the ID of the desired box would allow you to achieve this effectively.

The addition of the same box class to both div elements eliminates the need for individual box1/box2 classes since differentiators are already handled by their respective IDs.

Including a toggle class to the links simplifies the selector and removes redundant 'open/close' duplicates, as the toggle class is designed to handle both actions seamlessly.

jQuery(document).ready(function($){
  $('.toggle').on('click', function(){
    var targetBox = $(this).attr('target-box'); // Locate the target box
    
    $('.box').not(targetBox).hide(1000); // Conceal all other boxes
    
    $(targetBox).toggle(1000); // Toggle the visibility of the current box
  });
});

.container {
  width: 90px;
}

.box1 {
  background-color: green;
  color: red;
  display: none;
}

.box2 {
  background-color: blue;
  color: yellow;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box box1" id="box1">
    This is Box 1
  </div>

  <div class="box box2" id="box2">
    This is Box 2
  </div>
</div>

<a href="#" class="toggle" target-box="#box1">Toggle Box1</a>
<a href="#" class="toggle" target-box="#box2">Toggle Box2</a>

Answer 2

Typically, you can utilize a single document ready function.

To simplify, you could implement a single click function to manage your toggles. As you are utilizing trigger links, it is important to have a way to identify the target box. Adding an additional attribute like target-box with the ID of the desired box would allow you to achieve this effectively.

The addition of the same box class to both div elements eliminates the need for individual box1/box2 classes since differentiators are already handled by their respective IDs.

Including a toggle class to the links simplifies the selector and removes redundant 'open/close' duplicates, as the toggle class is designed to handle both actions seamlessly.

jQuery(document).ready(function($){
  $('.toggle').on('click', function(){
    var targetBox = $(this).attr('target-box'); // Locate the target box
    
    $('.box').not(targetBox).hide(1000); // Conceal all other boxes
    
    $(targetBox).toggle(1000); // Toggle the visibility of the current box
  });
});

.container {
  width: 90px;
}

.box1 {
  background-color: green;
  color: red;
  display: none;
}

.box2 {
  background-color: blue;
  color: yellow;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box box1" id="box1">
    This is Box 1
  </div>

  <div class="box box2" id="box2">
    This is Box 2
  </div>
</div>

<a href="#" class="toggle" target-box="#box1">Toggle Box1</a>
<a href="#" class="toggle" target-box="#box2">Toggle Box2</a>

Answer 3

Answer №2

If you're looking for a solution, this method might work well for your needs. By targeting elements with a specific marker, such as a class, you can easily hide or show them as required. In the code snippet below, I've assigned the class "box" to all box elements. When opening a box, all other boxes are hidden first before displaying the selected one.

With this setup, clicking open will reveal the chosen box while closing any others. Similarly, clicking close will only shut the specified box.

$(document).ready(function() {
  $("#button1").click(function() {
    $(".box").hide(1000);
    $("#box1").show(1000);
  });
  $("#buttonclose").click(function() {
    $("#box1").hide(1000);
  });
  $("#button2").click(function() {
    $(".box").hide(1000);
    $("#box2").show(1000);
  });
  $("#buttonclose2").click(function() {
    $("#box2").hide(1000);
  });
});

.container {
  width: 90px;
}

.box1 {
  background-color: green;
  color: red;
  display: none;
}

.box2 {
  background-color: blue;
  color: yellow;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box box1" id=box1>
    This is Box 1
  </div>

  <div class="box box2" id=box2>
    This is Box 2
  </div>
</div>

<a href="#" id="buttonclose">Close Box1</a>
<a href="#" id="buttonclose2">Close Box2</a>

<a href="#" id="button1">Open Box1</a>
<a href="#" id="button2">Open Box2</a>

Answer 4

If you're looking for a solution, this method might work well for your needs. By targeting elements with a specific marker, such as a class, you can easily hide or show them as required. In the code snippet below, I've assigned the class "box" to all box elements. When opening a box, all other boxes are hidden first before displaying the selected one.

With this setup, clicking open will reveal the chosen box while closing any others. Similarly, clicking close will only shut the specified box.

$(document).ready(function() {
  $("#button1").click(function() {
    $(".box").hide(1000);
    $("#box1").show(1000);
  });
  $("#buttonclose").click(function() {
    $("#box1").hide(1000);
  });
  $("#button2").click(function() {
    $(".box").hide(1000);
    $("#box2").show(1000);
  });
  $("#buttonclose2").click(function() {
    $("#box2").hide(1000);
  });
});

.container {
  width: 90px;
}

.box1 {
  background-color: green;
  color: red;
  display: none;
}

.box2 {
  background-color: blue;
  color: yellow;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box box1" id=box1>
    This is Box 1
  </div>

  <div class="box box2" id=box2>
    This is Box 2
  </div>
</div>

<a href="#" id="buttonclose">Close Box1</a>
<a href="#" id="buttonclose2">Close Box2</a>

<a href="#" id="button1">Open Box1</a>
<a href="#" id="button2">Open Box2</a>

Hide all div elements except one by toggling them at the same position

Answer №1

Answer №2

Similar questions

Avoiding Page Reloads with Ajax while Removing Entries from a Table in Laravel

What is the best way to empty the input field after a download event is completed in Node.JS?

The Vue template is not able to recognize the Pug language syntax within the .vue file

Encountering issues with styling the search bar using CSS and unable to see any changes reflected

Ways to switch up the titles on UploadThing

Guide on populating a textbox with values through Ajax or Jquery

The vital role of Package.json in the distribution of packaged products

The reason why I am unable to utilize ng-click within jQueryDialog remains unclear

How to achieve the wrapping functionality in ReactJS that is similar to

Steps for generating an HTML form in a fresh window

React-bootstrap's Modal is glitching and only partially appearing on the screen

Is it possible to blend javascript with server-side javascript code in a single project?

How to place a button in the bottom center of a panel using asp.net

Using JavaScript, pass an array containing a list of JSON values

What are the advantages of storing data in HTML tags that do not contain any content?

Utilizing onClick to target data within a .map function

Whiskey Angostura and Straight Row Set to 8, not 12

issue with mongoose virtual populate (unable to retrieve populated field)

Initial space in model variable not being displayed

The webpack development server is failing to inject CSS