单击后检查div是否存在，如果存在则将其删除

Question

I have a JavaScript which is create a type of accordion, I would like to open div s on click and then close them on a second click. I could done that but then I don't know where to insert the removing code el.classList.remove("openDiv"); to close all tabs that might was open and the only tab which should be open is the clicked one.

Here is the JavaScript code:

var el = document.getElementsByClassName('applications');
var i;
var action = 1;

function addHandler(el) {
   el.addEventListener("click", function() {

     if ( action == 1 ) {
       el.classList.add('openDiv');
       action = 2;
     } else {
       el.classList.remove("openDiv");
       action = 1;
     }
   });
}

for (i = 0; i < el.length; i++) {
   addHandler(el[i]);
}

I also created a DEMO

Answer 1

var el = document.getElementsByClassName('applications');
var i;

function addHandler(el) {
  el.addEventListener("click", function() {

     //updated condition for click
     if ( !this.classList.contains('openDiv')) {
        var a = document.getElementsByClassName('openDiv');
        for (var i in a) {
          if (a[i].classList) {
            a[i].classList.remove("openDiv");
          }
        }
        el.classList.add('openDiv');
        action = 2;
    } else {
        el.classList.remove("openDiv");
        action = 1;
    }

  });
}

for (i = 0; i < el.length; i++) {
  addHandler(el[i]);
}

Working demo

Answer 2

I've edited a little your code, find an example here: https://jsfiddle.net/48Lpvmbr/2/

code:

var els = document.getElementsByClassName('applications');

function addHandler(el) {
  el.addEventListener("click", function() {

     for(var x = 0; x < els.length; x++){
        if(els[x] === el){
            console.log("NOT ME!!!");
        }else{
            els[x].classList.remove("openDiv");
        }
     }

     if(el.classList.contains("openDiv")){
        el.classList.remove("openDiv");
     }else{
        el.classList.add("openDiv");
     }

  });
}

for (var i = 0; i < els.length; i++) {
  addHandler(els[i]);
}

Answer 3

var el = document.getElementsByClassName('applications');
var i;

function addHandler(el) {
  el.addEventListener("click", function() {
     el.classList.toggle('openDiv');
      removeOpen(el);
  });
}

function removeOpen(openElement){
  for (i = 0; i < el.length; i++) {
   if(el[i] !== openElement){
     el[i].classList.remove("openDiv");
   }
  }
}

for (i = 0; i < el.length; i++) {
  addHandler(el[i]);
}

Answer 4

I changed up your code a little to have a wrapper element around the content so there is only one event listener. But basically you need to select the open elements and than remove the class.

 var wrapper = document.getElementById("application_wrapper"); wrapper.addEventListener("click", function(evt) { var elem = evt.target; //get what was clicked if (elem.nodeName === "H2") { //see if it was an h2 elem.classList.toggle("open"); //now to remove var opened = wrapper.querySelectorAll("h2.open"); //find opened for(var i=opened.length-1; i>=0;i--) { //loop if (opened[i]==elem) continue; //make sure we do not remove the one we just added opened[i].classList.remove("open"); } } }); 

 h2 + h1, h2 + h1 + p { display: none; } h2.open + h1, h2.open + h1 + p { display: block; } .applications { border: 1px solid black; } h1{ border-top: 1px solid #CCC; } h2{cursor: pointer;} 

 <div id="application_wrapper"> <div class="applications" id="colorCos"> <h2>Color Cosmetics</h2> <h1>Color Cosmetics</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu. Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit amet sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p> </div> <div class="applications" id="hairCare"> <h2>Hair Care</h2> <h1>Hair Care</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu. Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit amet sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p> </div> <div class="applications" id="babyCare"> <h2>Baby Care</h2> <h1>Baby Care</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu. Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit amet sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p> </div> <div class="applications" id="skinCare"> <h2>Skin Care</h2> <h1>Skin Care</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu. Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit amet sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p> </div> <div class="applications" id="soap"> <h2>Soap & Bath</h2> <h1>Soap & Bath</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu. Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit amet sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p> </div> </div>