2017-10-13 15 views
0

JavaScriptアコーディオンで最初に開く方法オープニング用には+、終了用には-の基本的なアコーディオンです。私はこれが初めてで、jQueryアコーディオンのソリューションしか見つけられません。また、jQueryがアコーディオンになるときに行く方法であるかどうかを知りたいですか?最初のJavaScriptアコーディオンを開きます

ここjsFiddleです:https://jsfiddle.net/dmkx8hg0/

は、ここでは、コードです:

<head> 
<style> 
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: #ccc; 
} 

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

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

div.panel { 
    padding: 0 18px; 
    background-color: white; 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.2s ease-out; 
} 
</style> 
</head> 
<body> 
<button class="accordion">Section 1</button> 
<div class="panel"> 
    <p>content</p> 
</div> 

<button class="accordion">Section 2</button> 
<div class="panel"> 
    <p>content</p> 
</div> 

<button class="accordion">Section 3</button> 
<div class="panel"> 
    <p>content</p> 
</div> 

<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> 
</body> 
+0

Jqueryを使用するとどうなりますか? –

+0

私が作業しているコードはjavascriptです。それでそれを続けた。 –

答えて

0

あなたはちょうどあなたのjavascriptの最初の要素のクリックイベントをトリガすることができます。 Here's an updated fiddle

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].onclick(); 
0

アクティブなクラス名とスタイルをパネルに追加するだけでなく、最初のパネルを開く場合は、トリックを行う必要があります。 <button class="accordion active">Section 1</button> <div class="panel" style="max-height: 89px;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div>

関連する問題