Аккордеон от W3C - как открыть по одной панели за раз? - PullRequest
Новая
       6

Аккордеон от W3C - как открыть по одной панели за раз?

0 голосов
/ 04 мая 2018

У меня есть гармошка, где я хочу открывать только одну панель одновременно. Мне нужна помощь, чтобы закрыть любую открытую панель, когда пользователь щелкает, чтобы открыть закрытую панель. Я думаю, для этого нужен какой-то javascript - боюсь, я не уверен, как этого добиться ... У меня будет больше панелей, чем показано в примере

У меня есть следующий код: 

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.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
.accordion {
    background-color: #EA3F8A;
    color: #FFF;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

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

.accordion:after {
    content: '\002B';
    color: #FFF;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

#accord {
    margin-bottom: 5.5em;
}
<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 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>

Ответы [ 2 ]

0 голосов
/ 04 мая 2018

Мне всегда было проще сделать свой собственный аккордеон: 

$('.item-title').click(function() {
        $(this).parents().siblings().find('.item-body').slideUp();
        $(this).parents().siblings('.item').find('.item-open-close').removeClass('fa-minus').addClass('fa-plus');
        $(this).find('i').toggleClass('fa-minus fa-plus');
        $(this).siblings('.item-body').slideToggle();
    });
.item-title i {
float:right;
}

.item-title {
    background-color: #EA3F8A;
    color: #FFF;
    cursor: pointer;
    padding: 18px;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}
.item-body {
padding:18px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="accordion">            
  <div class="item">
    <div class="item-title">
      Section 1<i class="fa item-open-close fa-plus"></i>
    </div>
    <div class="item-body" style="display: none;">
      This is content. This is content. This is content. This is content. This is content. This is content. This is content.   
    </div>  
  </div>
  <div class="item">
    <div class="item-title">
      Section 2<i class="fa item-open-close fa-plus"></i>
    </div>
    <div class="item-body" style="display: none;">
      This is content. This is content. This is content. This is content. This is content. This is content. This is content.   
    </div>  
  </div>
  <div class="item">
    <div class="item-title">
      Section 3<i class="fa item-open-close fa-plus"></i>
    </div>
    <div class="item-body" style="display: none;">
      This is content. This is content. This is content. This is content. This is content. This is content. This is content.   
    </div>  
  </div>
</div>
</div>

Надеюсь, это поможет :)

0 голосов
/ 04 мая 2018

Вам нужно закрыть другие аккордеоны, прежде чем открывать ту, по которой щелкнули. 

var acc = document.getElementsByClassName("accordion");
var i, j;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    for (j = 0; j < acc.length; j++) {
      acc[j].classList.remove("active");
      acc[j].nextElementSibling.style.maxHeight = null;
    }
    if (!this.classList.contains("active")){
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight){
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      } 
    }

  });
}
.accordion {
    background-color: #EA3F8A;
    color: #FFF;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

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

.accordion:after {
    content: '\002B';
    color: #FFF;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

#accord {
    margin-bottom: 5.5em;
}
<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 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>
...