W3.CSSアコーディオン
下の[セクションを開く]ボタンをクリックして、アコーディオンがどのように機能するかを確認してください。
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.
Accordion with Images:
French Alps
アコーディオン
アコーディオンは、HTMLコンテンツを表示（および非表示）するために使用されます。
w3-hideクラスを使用して、アコーディオンのコンテンツを非表示にします。
あらゆる種類のボタンを使用して、コンテンツを開いたり閉じたりします。
例
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Open Section 1</button>
<div id="Demo1" class="w3-container
w3-hide">
<p>Some text..</p>
</div>
<script>
function myFunction(id) {
var x =
document.getElementById(id);
if (x.className.indexOf("w3-show")
== -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
アコーディオンを開くために使用される要素とアコーディオンのコンテンツはどちらも、任意のHTML要素にすることができます。
アコーディオンとドロップダウン
この表は、アコーディオンとドロップダウンの違いを示しています。
| アコーディオン | 落ちる |
|---|---|
| コンテンツはページのコンテンツを押し下げます | コンテンツは既存のページコンテンツの上にあります |
| 多くの場合、コンテンツは100％幅です | コンテンツの幅は160px（デフォルト） |
| 多くの場合、複数のセクションを開くために使用されます | 多くの場合、1つのセクションを開くために使用されます |
アコーディオン
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.
ドロップダウン
アコーディオンボタン
任意のHTML要素を使用して、アコーディオンコンテンツを開くことができます。ページの幅全体（幅100％）にまたがるには、 w3ブロッククラスのボタンを使用することをお 勧めします。
W3.CSSのボタンはデフォルトで中央に配置されていることに注意してください。代わりに左揃えにする場合は、w3-left-alignクラスを使用します。ただし、私たちのアプローチに従う必要はありません。アコーディオンはどちらの方法でも見栄えがします。
Lorem ipsum...
Lorem ipsum...
Centered content as well!
例
<button onclick="myFunc('Demo1')"
class="w3-button">
Normal button</button>
<div id="Demo1" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo2')" class="w3-button w3-block w3-left-align
w3-green">
Left aligned and full-width</button>
<div id="Demo2" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn w3-block
w3-red">
Centered and full-width</button>
<div id="Demo3"
class="w3-hide w3-center">
<p>Centered content as well!</p>
</div>
アクティブなアコーディオンボタン
JavaScriptを使用して、開いている（クリックされた）アコーディオンを強調表示します。
Some text..
Some other text..
例
// Add the w3-red class to all opened accordions
var x =
document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += "
w3-red";
} else {
x.className = x.className.replace("w3-show",
"");
x.previousElementSibling.className =
x.previousElementSibling.className.replace("w3-red", "");
}
アコーディオン幅
デフォルトでは、ブロックの幅は100％です。これをオーバーライドするには、アコーディオンコンテナのCSSwidthプロパティを変更します。
Some text..
Some text..
Some text..
Some text..
例
<div class="w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')"
class="w3-button w3-block">
50%
</button>
<div id="Demo1" class="w3-hide">
<p>Some text..</p>
</div>
</div>
アコーディオンコンテンツ
リンク付きアコーディオン：
例
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Accordion</button>
<div id="Demo1" class="w3-hide">
<a href="#" class="w3-button w3-block w3-left-align">Link 1</a>
<a href="#"
class="w3-button w3-block w3-left-align">Link 2</a>
<a href="#"
class="w3-button w3-block w3-left-align">Link 3</a>
</div>
リストとしてのアコーディオン：
- ジル
- イブ
- アダム
例
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Accordion</button>
<div id="Demo1" class="w3-hide">
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
サイドバー内のアコーディオン（サイドバーについては後で詳しく説明します）：
例
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:200px;">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button" onclick="myAccFunc()">Accordion</a>
<div
id="demoAcc" class="w3-hide">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
<div class="w3-dropdown-click">
<a href="#" class="w3-bar-item w3-button" onclick="myDropFunc()">Dropdown</a>
<div
id="demoDrop" class="w3-dropdown-content">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
</div>
<a href="#" class="w3-bar-item
w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
アニメーションアコーディオン
w3-animate-クラスのいずれかを使用して、アコーディオンコンテンツをフェード、ズーム、またはスライドします。
例
<div id="Demo1" class="w3-hide
w3-animate-zoom">