Saya ingin membuat halaman FAQ dengan widget Accordion ( http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/widgets/widget_accordion.html ).
Apakah mungkin menggunakannya di halaman CMS?
Saya ingin membuat halaman FAQ dengan widget Accordion ( http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/widgets/widget_accordion.html ).
Apakah mungkin menggunakannya di halaman CMS?
Jawaban:
Itu mungkin. Jika ingin digunakan
data-mage-init
Maka Anda melakukannya seperti ini:
<div id="element" data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": false, "multipleCollapsible": true}}'>
<div data-role="collapsible">
<div data-role="trigger">
<span>Title 1</span>
</div>
</div>
<div data-role="content">Content 1</div>
<div data-role="collapsible">
<div data-role="trigger">
<span>Title 2</span>
</div>
</div>
<div data-role="content">Content 2</div>
<div data-role="collapsible">
<div data-role="trigger">
<span>Title 3</span>
</div>
</div>
<div data-role="content">Content 3</div>
</div>
Ini bekerja untuk saya:
<div data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": false, "multipleCollapsible": false}}'>
<div data-role="collapsible">
<div data-role="trigger">
Title 1
</div>
</div>
<div data-role="content">
<p>
Content 1 bla bla bla.
</p>
</div>
<div data-role="collapsible">
<div data-role="trigger">
Title 2
</div>
</div>
<div data-role="content">
<p>
Content 2 bla bla bla.
</p>
</div>
</div>
<div id="element" data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": false, "multipleCollapsible": true}}'>
<button class="accordion" data-role="collapsible">Section 1</button>
<div class="panel" data-role="content">
<p>Lorem ipsum...</p>
</div>
<button class="accordion" data-role="collapsible">Section 2</button>
<div class="panel" data-role="content">
<p>Lorem ipsum...</p>
</div>
<button class="accordion" data-role="collapsible">Section 3</button>
<div class="panel" data-role="content">
<p>Lorem ipsum...</p>
</div>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}