JS toggle for multiple div elements

Question

What should I do if I have multiple elements in HTML foreach and I need to make them all a toggle slider what opens div block with specific information about the element and I need to add close button too if a user wants to close the div. Sorry, I don't have any code to show because I did not find anything that suits my needs. The main idea is to have a product page with products that are displayed on a page using foreach... Then when you click on a product toggle div block is opened with information about a product. What should I search and what to use, I can't find anything because I am limited with my knowledge. Sorry for terrible English.

Welcome (back) to Stack Overflow! Please take the [tour] (you get a badge!), have a look around, and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) I also recommend Jon Skeet's [Writing the Perfect Question](https://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/) — T.J. Crowder, Feb 03 '19 at 17:38

score 1 · Answer 1 · answered Feb 03 '19 at 17:25

You can easily control the visibility of an element either within the div you're clicking or after it using a class you toggle. Here's an example controlling the div after one of the divs that controls the toggle:

document.getElementById("container").addEventListener("click", function(e) {
  var toggleDiv = e.target.closest(".toggle");
  if (toggleDiv && this.contains(toggleDiv)) {
    toggleDiv.classList.toggle("closed");
  }
});

.closed + .detail {
  display: none;
}

<div id="container">
  <div class="toggle closed">Product A</div>
  <div class="detail">Details about Product A</div>
  <div class="toggle closed">Product B</div>
  <div class="detail">Details about Product B</div>
  <div class="toggle closed">Product C</div>
  <div class="detail">Details about Product C</div>
</div>

The key bits there are:

Hiding the details via CSS with the adjacent sibling combinator (+)
Toggling the class on the toggling div

I used event delegation to hook up the handler, but you could instead hook it up to each individual div if you preferred. Note that the Element#closest method I used is relatively new, you may need a polyfill or a loop on parentNode instead.

Thanks. But this is not what I need. Product descriptions will not be under products but in one static place. SO if you open product description 1 and then open product description 2 it will close the product description 1. — WikStar, Feb 03 '19 at 17:29
@WikStar - This is why you need to include proper details in the question, such as what your HTML structure is. So A) You don't waste people's time, and B) The help they provide is actually helpful to you. — T.J. Crowder, Feb 03 '19 at 17:31

Deepak Adhana · Answer 2 · 2019-02-03T17:49:15.190

From what i have understood. You need to toggle div elements using button tag and the button u click will show that particular div element.

    <div id="container1" class={container1 ? "show" : "hide"}> 
       container1
     </div>
     <div id="container2"class={container2 ? "show" : "hide"}> 
     container2
     </div>
     <div id="container3"class={container3 ? "show" : "hide"}> 
     container3         
     </div>

and three button tags to call toggle function to show the three div element.

<div class="container">
  <button name="container1" onclick=(toggle())>Container1</button>
  <button name="container2" onclick=(toggle())>Container2</button>
  <button name="container3" onclick=(toggle())>Container3</button>
</div>

toggle function

function toggle(e) {
 if(e.target.name === 'container1'){
  container1 = true;
  }
  else if(e.target.name === 'container2'){
  container2 = true; 
  }
 else if(e.target.name === 'container3'){
  container3 = true;   
  }
 }

css part

  .show{
     display: block;
   }
  .hide{
    display: none;
   }

JS toggle for multiple div elements

2 Answers2