Home>

There is such an od of the accordion. When you click on the element again, it closes, everything is in order. How to make the previous accordion close when clicking on another accordion?

const accordion= document.getElementsByClassName ('btn_accordion');
    for (i= 0; i <
 accordion.length; i ++) {
        accordion [i] .addEventListener ('click', function () {
            console.log ('fefef')
            this.nextElementSibling.classList.toggle ('accordion_active')
            this.classList.toggle ('btn_accordion_active')
            this.lastElementChild.firstElementChild.classList.toggle ('icon_arrow_active')
            this.lastElementChild.classList.toggle ('icon_accordion_active')
        }
        )
        }
  • Answer # 1

    It is necessary to check if the poked accordion is open. If it is open, close it. If closed, close ALL accordions, and open the one you poked at.

    let acc= document.querySelectorAll ('. accordion');
    acc.forEach (item= >
     {
        item.addEventListener ('click', e= >
     {
        if (e.target.classList.contains ('active')) {
            e.target.classList.remove ('active');
          return;
        }
        acc.forEach (e= >
    e.classList.remove ('active'));
        e.target.classList.add ('active');
      });
    }); 
    .accordion {
        background-color: #eee;
        color: # 444;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        text-align: left;
        border: none;
        outline: none;
        transition: 0.4s;
    }
    .active, .accordion: hover {
        background-color: #ccc;
    }
    .panel {
        padding: 0 18px;
        background-color: white;
        overflow: hidden;
        height: 0;
        transition: 0.4s;
    }
    .accordion.active + .panel {
        height: 50px;
    } 
    <
    button class= "accordion" >
    Section 1 <
    /button >
    <
    div class= "panel" >
      <
    p >
    Lorem ipsum ... <
    /p >
    <
    /div >
    <
    button class= "accordion" >
    Section 2 <
    /button >
    <
    div class= "panel" >
      <
    p >
    Lorem ipsum ... <
    /p >
    <
    /div >
    <
    button class= "accordion" >
    Section 3 <
    /button >
    <
    div class= "panel" >
      <
    p >
    Lorem ipsum ... <
    /p >
    <
    /div >
    
  • Answer # 2

    It is necessary to check if the poked accordion is open. If it is open, close it. If closed, close ALL accordions, and open the one you poked at.

    let acc= document.querySelectorAll ('. accordion');
    acc.forEach (item= >
     {
        item.addEventListener ('click', e= >
     {
        if (e.target.classList.contains ('active')) {
            e.target.classList.remove ('active');
          return;
        }
        acc.forEach (e= >
    e.classList.remove ('active'));
        e.target.classList.add ('active');
      });
    }); 
    .accordion {
        background-color: #eee;
        color: # 444;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        text-align: left;
        border: none;
        outline: none;
        transition: 0.4s;
    }
    .active, .accordion: hover {
        background-color: #ccc;
    }
    .panel {
        padding: 0 18px;
        background-color: white;
        overflow: hidden;
        height: 0;
        transition: 0.4s;
    }
    .accordion.active + .panel {
        height: 50px;
    } 
    <
    button class= "accordion" >
    Section 1 <
    /button >
    <
    div class= "panel" >
      <
    p >
    Lorem ipsum ... <
    /p >
    <
    /div >
    <
    button class= "accordion" >
    Section 2 <
    /button >
    <
    div class= "panel" >
      <
    p >
    Lorem ipsum ... <
    /p >
    <
    /div >
    <
    button class= "accordion" >
    Section 3 <
    /button >
    <
    div class= "panel" >
      <
    p >
    Lorem ipsum ... <
    /p >
    <
    /div >