Сила Сила на Аккордеоне - PullRequest
Новая
       13

Сила Сила на Аккордеоне

0 голосов
/ 04 октября 2018

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

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

ЛюбойПомощь будет принята с благодарностью.Спасибо !! 

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion-2 {
    background-color: #e38854 ;
    font-family: lato;
    font-wtight: bold;
    color: white;
    cursor: pointer;
    padding: 15px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px;
    line-height: 20px;
    transition: 0.4s;
    margin-top: 0px;

}


.accordion-2:after {
    content: '+';
    color: white;
    font-weight: bold;
    font-size; 16px;
    float: right;
    margin-left: 3px;
    margin-right: 15px;


}

.active, .accordion-2:hover {
    background-color: #c88862;

}

.active, .accordion-2:hover {
font-color: white;

}

.active:after {
    content: "-";
    color: white;
    font-weight: bold;
    font-size: 18px;
    float: right;
    margin-left: 3px;
    margin-right: 15px;
}

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


</style>
</head>
<body>

<button class="accordion-2">Heading 1</button>
<div class="panel">
  <p style="text-align: left;"><span style="font-size: 16px; line-height: 1.5;">
  Text 1<p></span></p>
</div>

<button class="accordion-2">Heading 2</button>
<div class="panel">
  <p style="text-align: left;"><span style="font-size: 16px; line-height: 1.5;">
  Text 2<p></span></p>
</div>

<button class="accordion-2">Heading 3</button>
<div class="panel">
  <p style="text-align: left;"><span style="font-size: 16px; line-height: 1.5;">
  Text 3<p></span></p>
</div>

<button class="accordion-2">Heading 4</button>
<div class="panel">
  <p style="text-align: left;"><span style="font-size: 16px; line-height: 1.5;">
  Text 4<p></span></p>
</div>

<button class="accordion-2">Heading 5</button>
<div class="panel">
  <p style="text-align: left;"><span style="font-size: 16px; line-height: 1.5;">
  Text 5<p></span></p>
</div>

<script>
var acc = document.getElementsByClassName("accordion-2");
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";

    } 
  });
}



</script>

</body>
</html>
...