jsを使用してアコーディオンメニューを設計しましたが、一度に1つのアコーディオンタブを開くだけです。必要な変更を提案してください。私はたくさんのことを試みましたが、それについてのアイデアがあれば、私はそれを得ませんでした。jsを使用してアコーディオンメニューを設計しましたが、一度に1つのアコーディオンタブのみを開いてみたい
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){
\t
\t panel.style.maxHeight = null;
} else {
\t panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
height:45px;
border: solid 2px;
border-color: #E5E7E9;
text-align: left;
padding:0 16px ;
outline: none;
font-size: 15px;
transition: 0.4s;
border-radius:10px;
margin: 4px;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
button.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2212";
}
div.panel1 {
padding: 0 20px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
border-radius:5px;
}
<div class="container" style="position:relative; margin-top:70px;margin-bottom:70px;" >
<div class="well" style="border-radius:8px;box-shadow:0 0 7px #999 background-color: #fafafa;">
<h2>Our Services</h2>
<button class="accordion"><span class="glyphicon glyphicon-phone" ></span> Mobile Recharge</button>
<div class="panel1">
<p>
<div class="scroll_table" id="style-2">
<table class="table" >
<tbody>
<tr><td>BSNL</td></tr>
<tr><td>Idea</td></tr>
<tr><td>Vodaphone</td></tr>
<tr><td>Reliance</td></tr>
</tbody>
</table>
</div>
</p>
</div>
<button class="accordion"><span class="glyphicon glyphicon-earphone" ></span> Postpaid Bills</button>
<div class="panel1">
<p><div class="scroll_table" id="style-2">
<table class="table" >
<tbody>
<tr><td>BSNL</td></tr>
<tr><td>Idea</td></tr>
<tr><td>Vodaphone</td></tr>
<tr><td>Reliance</td></tr>
</tbody>
</table>
</div>
</p>
</div>
<button class="accordion"><span class="glyphicon glyphicon-phone-alt" ></span> Landline Bills</button>
<div class="panel1">
<p><div class="scroll_table" id="style-2">
<table class="table" >
<tbody>
<tr><td>Airtel Landline and Broadband</td></tr>
<tr><td>BSNL Landline and Broadband</td></tr>
<tr><td>MTNL Delhi</td></tr>
</tbody>
</table>
</div>
</p>
</div>
<button class="accordion"><span class="glyphicon glyphicon-list" ></span> Dth</button>
<div class="panel1">
<p>
<div class="scroll_table" id="style-2">
<table class="table" >
<tbody>
<tr><td>Tata Sky</td></tr>
<tr><td>Dish TV</td></tr>
<tr><td>Sun Direct</td></tr>
<tr><td>Reliance Digital</td></tr>
</tbody>
</table>
</div>
</p>
</div>
<button class="accordion"><span class="glyphicon glyphicon-credit-card" ></span> Datacard</button>
<div class="panel1">
<p>
<div class="scroll_table" id="style-2">
<table class="table" >
<tbody>
<tr><td>Active</td></tr>
<tr><td>Active</td></tr>
<tr><td>Active</td></tr>
<tr><td>Active</td></tr>
</tbody>
</table>
</div>
</p>
</div>
<button class="accordion"><span class="glyphicon glyphicon-flash" ></span> Electricity</button>
<div class="panel1">
<p>
<div class="scroll_table" id="style-2">
<table class="table" >
<tbody>
<tr><td>Marashtra Electricity Board</td></tr>
<tr><td>BSES Rajbhani Power-DELHI</td></tr>
<tr><td>BSES Yamuna Power-DELHI</td></tr>
<tr><td>MSEB Mumbai</td></tr>
</tbody>
</table>
</div>
</p>
</div>
<button class="accordion"><span class="glyphicon glyphicon-fire" ></span> Gas Bill</button>
<div class="panel1">
<p>
<div class="scroll_table" id="style-2">
<table class="table" >
<tbody>
<tr><td>Mahanagar Gas</td></tr>
<tr><td>Active</td></tr>
</tbody>
</table>
</div>
</p>
</div>
<button class="accordion"><span class="glyphicon glyphicon-tint" ></span> Water Bill</button>
<div class="panel1">
<p>
<div class="scroll_table" id="style-2">
<table class="table" >
<tbody>
<tr><td>All Companies</td></tr>
<tr><td>Active</td></tr>
</tbody>
</table>
</div>
</p>
</div>
</div>
</div>
ナイス!ページ上の他の場所(他のアコーディオン、タブなど)で使用されている場合は、一般的な「アクティブ」クラスを削除する際に問題が発生する可能性があることに注意してください。 –
私は上記のコードを挿入しますが、私はエラーが発生しました:Uncaught TypeError:accArr.forEachは関数ではありません – kkk
おっと!申し訳ありませんが、私はforEachメソッドの最後に閉じかっこを付けませんでした。 (注:大規模な配列に対してforEachを使用することはお勧めしません)リンカーン、私が書くのを念頭に置いていました。ナイスキャッチ。更新:変数「activeElement」は、「accordion」クラスと「active」クラスの両方を含む要素のみを参照します。 (ちょうど彼女が他の要素に「アクティブ」クラスを追加することを決めた場合) – Lex