Аккордеон на JavaScript

Аккордеон является одно из самых простых вещей, которое можно написать на JavaScript. В этой статье, я вам покажу, как сделать простой аккордеон.

Аккордеон на JavaScript

Разметка HTML


<button class="btn_acc" onclick="accShow()">Открыть</button>
<div id="myDIV">
Любой текст
</div>

В этом коде мы создали кнопку с функцией accShow().

Css

Дальше, мы уже применяем стили для этого аккордеона.


* {
    margin: 0;
    padding: 0;
    outline: none;
}
body {
    background-color: #c1c1c1;
}
#myDIV {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 47.2%;
    border: none;
    text-align: left;
    margin: auto;
}
.btn_acc {
      background-color: black;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 50%;
    border: none;
    text-align: left;
}

JavaScript

Теперь приступает к JavaScript.


 <script>
  function accShow() {
     var acc = document.getElementById("myDIV");
         if (acc.style.display == "none") {
             acc.style.display = "block";
      } 
         else {
             acc.style.display = "none";
      }
  }
 </script>
 

В этом коде мы сначала создали переменную acc, дальше мы проверили, если аккордеон скрыт, то мы его открываем, а в другом случае скрываем его