Как реализовать аккордеон в чистом JS не работает - PullRequest
Новая
       14

Как реализовать аккордеон в чистом JS не работает

0 голосов
/ 10 мая 2019

Я хотел бы знать, как реализовать аккордеон в javascript.

Ниже функция аккордеона не работает, сообщая об ошибке как TypeError: Cannot read property 'classList' of null

Я застрял, пожалуйста, помогите, и мне нужно сделать следующеетолько в JavaScriptЯ обновил код ниже HTML, CSS и код JavaScript. 

<div class="wrapper">
<div class="card"  class="accordioncontent" id="accordioncontent_js">
  <p>Implement Accordion in Pure JS</p>
</div>
<div class="card-title">
 <h5 class="accordionheader" @click=${this.handleToggle('js')}>JS</h5>
</div>

<div class="card"  class="accordioncontent" id="accordioncontent_ph">
  <p>Implement Accordion in Pure JS</p>
</div>
<div class="card-title">
 <h5 class="accordionheader" @click=${this.handleToggle('ph')}>PH</h5>
</div>
</div>
js
  handleToggle(xid){
    var aC = this.shadowRoot.querySelectorAll("accordioncontent");
    var sc= this.shadowRoot.getElementById("accordioncontent_" + xid)
    var i;
       for(i = 0; i < aC.length; i++){
          var OaC = aC[i];
             if(aC[i] != sc){
                OaC.classList.remove("show_Content")
             }
       }
        sc.classList.toggle("show_Content");
 }
css
.show_Content{
    padding:20px 0;
    display:block;
    border:1px solid #a3a3a3;
    border-top:none;
    animation:slow-down .5s ease
    }

@keyframes slow-down{
    from{padding:0;opacity:0}
    to{padding:20px 0;opacity:1}
    }
.show_Content:before{
    content:"";
    width:8px;
    top:-7px;
    left:50%;
    display:block;
    position:absolute;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-bottom:8px solid #fff
    }

1 Ответ

0 голосов
/ 10 мая 2019 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
</style>
</head>
<body>

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

</body>
</html>
...