Toggle - How to hide information when another button is clicked

Question

How do I hide the information when I toggle on another button? Right now, if there is already information displayed at the bottom and I click on another button, the information just appears at the bottom instead.

function myClick() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

function myClick2() {
  var x = document.getElementById("myDIV2");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

#myDIV,
#myDIV2 {
  display: none;
}

.wrapper {
  display: flex;
}

.col {
  display: inline-block;
  width: 50%;
  padding: 2px 8px;
}

.box {
  display: flex;
  background-color: #f4f4f4;
}

<div class="wrapper">
  <div class="col">
    <div class="box" onclick="myClick()">Box</div>
  </div>

  <div class="col">
    <div class="box" onclick="myClick2()">This is a box</div>
  </div>
</div>

<div id="myDIV">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
</div>

<div id="myDIV2">
  This is my DIV element.
</div>

Checking CSS properties directly is [best avoided](/q/55071684/4642212). Instead, a CSS class should be used, e.g. `.hidden { display: none; }`; then [`.classList.has("hidden")`](//developer.mozilla.org/docs/Web/API/Element/classList) to check for its existence, `.classList.toggle("hidden", condition)` for setting the class iff `condition` is true, etc. Consider using the [`hidden` attribute](//developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) instead. — Sebastian Simon, Jul 29 '21 at 03:45
Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Jul 29 '21 at 03:46
Use [event delegation](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of assigning multiple event listeners — it’s more maintainable, and applies to dynamically added elements. E.g., use an [event argument](//developer.mozilla.org/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback)’s [`target`](//developer.mozilla.org/docs/Web/API/Event/target). See [the tag info](/tags/event-delegation/info) and [What is DOM Event delegation?](/q/1687296/4642212). Then you can try hiding all `
`s and showing only the one you need. — Sebastian Simon, Jul 29 '21 at 03:47

score 0 · Answer 1 · answered Jul 29 '21 at 04:32

It's just a logical problem. When you click a button you are only hiding/showing the related text, and doing nothing about the other text.

This is not (by far) the best approach to program this, but is fine to start.

You have to remove myClick2 function and use only one function: myClick, passing a parameter. This parameter "tells" the function which button was pressed. The function should be something like this:

function myClick(btn) {
  var x = document.getElementById("myDIV");
  var y = document.getElementById("myDIV2");
  if (btn === 1) {
    x.style.display = "none";
    y.style.display = "block";
  } else if (btn === 2) {
    x.style.display = "block";
    y.style.display = "none";
  } else {
    alert('The button has no related text');
  }
}

In the HTML part, call the function passing a parameter this way: both buttons executes the same function passing a diferent number as a parameter.

<div class="wrapper">
  <div class="col">
    <div class="box" onclick="myClick(1)">Box</div>
  </div>

  <div class="col">
    <div class="box" onclick="myClick(2)">This is a box</div>
  </div>
</div>

score 0 · Answer 2 · answered Jul 29 '21 at 05:25

Well try this it easily helps you to toggle between Div while hidding the other div Html

    <div class="wrapper">
  <div class="col">
    <button class="box">Box</button>
  </div>

  <div class="col">
    <button class="box1">This is a box</button>
  </div>
</div>

<div id="myDIV" class="display">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
</div>

<div id="myDIV2" class="display">
  This is my DIV element.
</div>

css

.display{
  display: none;
}
.show{
  display:block;
}
.wrapper {
  display: flex;
}

.col {
  display: inline-block;
  width: 50%;
  padding: 2px 8px;
}

.box .box1 {
  display: flex;
  background-color: #f4f4f4;
}

Js

var show = document.querySelector(".box");
var showOne = document.querySelector(".box1");

 show.addEventListener("click", onclick);

function onclick() {
  document.getElementById("myDIV").classList.toggle("show");
  document.getElementById("myDIV").classList.toggle("display");
   document.getElementById("myDIV2").classList.remove("show");
   document.getElementById("myDIV2").classList.add("display");
}

showOne.addEventListener("click",()=>{
   document.getElementById("myDIV2").classList.toggle("show");
 document.getElementById("myDIV").classList.remove("show");
   document.getElementById("myDIV").classList.add("display");
  document.getElementById("myDIV2").classList.toggle("display");
});

Toggle - How to hide information when another button is clicked

2 Answers2