Öffnen Akkordeon mit Javascript

Question

ich dieses Akkordeon in meiner Web-sep up

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

Wie kann ich konfigurieren das Akkordeon, die am Anfang geöffnet ist?

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

Sie benötigen Klasse hinzuzufügen .active-.accordion und style="display:block" zu untergeordnetes Element p dass Sie

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

offen halten wollen, wenn ich das verstehen Frage, versuche das erste (oder andere) Element auszuwählen und setze es s Anzeige zu "blockieren", wenn das Dokument geladen wird:

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

Answer 3

Fügen Sie einfach

acc [0] .click();

am Ende des Skripts

<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

Sie JavaScript verwenden, um die Eigenschaft el.nextElementSibling.style.display = 'block' auf dem ersten Element zu setzen:

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>