アコーディオン
アコーディオンは、セクションに分割されたコンテンツを表示（および非表示）するために使用されます。
それがどのように動作するか確認するには、以下「開断面」ボタンをクリックしてください。
Loremのイプサムの悲しみは、AMET座るconsectetur adipisicing ELIT、eiusmod incididunt UTをtemporんsedのlaboreらdoloreマグナaliqua。 ユタenim広告ミニムveniam、QUISのnostrud exercitationのullamcoのlaborisのNiSi UT aliquipの元のEA commodoのconsequat。
画像付きアコーディオン：
トロルトゥンガ、ノルウェー
W3-アコーディオンクラスはアコーディオンを定義し、W3-アコーディオンコンテンツクラスが表示される部分を定義しています。
例
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Open Section 1
</button>
<div id="Demo1" class="w3-accordion-content
w3-container">
<p>Some text..</p>
</div>
<button onclick="myFunction('Demo2')"
class="w3-btn-block w3-left-align">
Open Section 2
</button>
<div id="Demo2" class="w3-accordion-content
w3-container">
<p>Some text..</p>
</div>
</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要素にすることができます。
ドロップダウン対アコーディオン
以下のリストは、アコーディオンとドロップダウンの違いを示しています。
アコーディオン
Loremのイプサムの悲しみは、AMET座るconsectetur adipisicing ELIT、eiusmod incididunt UTをtemporんsedのlaboreらdoloreマグナaliqua。 ユタenim広告ミニムveniam、QUISのnostrud exercitationのullamcoのlaborisのNiSi UT aliquipの元のEA commodoのconsequat。
- 含有量が100％の幅である（親要素の幅全体に及びます）
- 開くと任意の（相対位置）場合、それは、ページコンテンツを押し下げ
- 多くの場合、複数のセクションを「開く」ために使用されます
アコーディオンボタン
あなたはアコーディオンのコンテンツを開くために、任意のHTML要素を使用することができます。 それだけでアコーディオンのコンテンツ（100％幅）のように、親要素の幅全体に及ぶので、私たちは、W3-BTN-ブロッククラスでボタンを好みます。 W3.CSSのボタンがデフォルトで集中していることに注意してください。 あなたは彼らが代わりに左揃えたい場合は、W3-左アラインクラスを使用します。 ただし、我々のアプローチを実行する必要はありません - アコーディオンは、いずれかの方法良いになります。
イプサムLoremの...
イプサムLoremの...
同様に、コンテンツを中心に！
例
<div class="w3-accordion w3-light-grey">
<button onclick="myFunc('Demo1')"
class="w3-btn">
Normal button
</button>
<div id="Demo1" class="w3-accordion-content">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo2')" class="w3-btn-block w3-left-align
w3-green">
Left aligned & full-width
</button>
<div id="Demo2" class="w3-accordion-content">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn-block
w3-red">
Centered & full-width
</button>
<div id="Demo3"
class="w3-accordion-content w3-center">
<p>Centered content as well!</p>
</div>
</div>アクティブアコーディオンボタン
（をクリック）開いているアコーディオンを強調するためにJavaScriptを使用します。
テキストの一部..
いくつかの他のテキスト..
例
// 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％です。 これを上書きするには、W3-アコーディオンコンテナのCSSのwidthプロパティを変更します。
テキストの一部..
テキストの一部..
テキストの一部..
テキストの一部..
例
<div class="w3-accordion w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')"
class="w3-btn-block">
50%
</button>
<div id="Demo1" class="w3-accordion-content">
<p>Some text..</p>
</div>
</div>アコーディオンコンテンツ
リンクを持つアコーディオン：
例
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Accordion
</button>
<div id="Demo1" class="w3-accordion-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>リストを持つカードとしてアコーディオン：
- ジル
- イブ
- アダム
例
<div class="w3-accordion w3-card-4">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Accordion
</button>
<div id="Demo1" class="w3-accordion-content">
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
</div>Sidenav内部アコーディオン（注：後でサイドナビゲーションについて詳しく説明します）：
例
<nav class="w3-sidenav w3-light-grey w3-card-2" style="width:200px;">
<a href="#">Link</a>
<div class="w3-accordion">
<a onclick="myAccFunc()" href="#">Accordion</a>
<div
id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="w3-dropdown-click">
<a onclick="myDropFunc()" href="#">Dropdown</a>
<div
id="demoDrop" class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#">Link</a>
<a href="#">Link</a>
</nav>アニメーションアコーディオン
アコーディオンのコンテンツで、ズームまたはスライドをフェードするW3-animate- クラスのいずれかを使用します。