Open аккордеона с Javascript

Question

Я SEP этот аккордеоне в моем веб

https://www.w3schools.com/howto/howto_js_accordion.asp

Как я могу настроить на аккордеоне, который открыт в начале?

Javascript:

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

for (i = 0; i < acc.length; i++) { 
    acc[i].onclick = 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> 

Answer 1

Вам нужно добавить класс .active к .accordion и style="display:block" к дочернему элементу p, что вы хотите, чтобы держать открытыми

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

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

button.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; 
 
} 
 

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

 
div.panel { 
 
    padding: 0 18px; 
 
    display: none; 
 
    background-color: white; 
 
}

<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>

Answer 2

Если я понимаю вопрос, попробуйте выбрать первый (или еще) элемент и установить его с дисплеем, чтобы "блок", когда документ загружен:

acc[0].nextElementSibling.style.display = "block" 

Answer 3

Просто добавьте

ACC [0] .click();

в конце сценария

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

for (i = 0; i < acc.length; i++) { 
    acc[i].onclick = function() { 
    this.classList.toggle("active"); 
    var panel = this.nextElementSibling; 
    if (panel.style.maxHeight){ 
     panel.style.maxHeight = null; 
    } else { 
     panel.style.maxHeight = panel.scrollHeight + "px"; 
    } 
    } 
} 
acc[0].click(); 
</script> 

Answer 4

Вы можете использовать JavaScript, чтобы установить свойство el.nextElementSibling.style.display = 'block' на первом элементе:

document.querySelectorAll('.accordion').forEach(function(el, index) { 
 
    // Add event listener to all elements 
 
    el.addEventListener('click', function() { 
 
    el.classList.toggle('active'); 
 
    el.nextElementSibling.style.display = el.nextElementSibling.style.display === 'block' 
 
     ? 'none' 
 
     : 'block'; 
 
    }); 
 
    
 
    // First element open 
 
    0 === index && (el.nextElementSibling.style.display = 'block'); 
 
});

button.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; 
 
} 
 

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

 
div.panel { 
 
    padding: 0 18px; 
 
    display: none; 
 
    background-color: white; 
 
}

<h2>Accordion</h2> 
 

 
<button class="accordion active" >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>