Я хочу сделать первую вкладку в этом аккордеоне открытой по умолчанию - без jQuery или bootstrap? - PullRequest
Новая
       5

Я хочу сделать первую вкладку в этом аккордеоне открытой по умолчанию - без jQuery или bootstrap?

0 голосов
/ 12 ноября 2018

Я хочу, чтобы первая вкладка в этом аккордеоне открывалась по умолчанию без jQuery или boostrap.

Код: -

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion

Спасибо!

1 Ответ

0 голосов
/ 12 ноября 2018

Добавьте класс .active к кнопке и добавьте в панель display: block;. 

<button class="accordion active">Section 1</button>
<div class="panel" style="display: block;">

Полный рабочий код: 

<!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 active">Section 1</button>
<div class="panel" style="display: block;">
  <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>
...