12

I want to create a FAQ page with the Accordion widget (http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/widgets/widget_accordion.html).

Is it possible to use it on a CMS page?

2
19

It is possible. If you want to use

data-mage-init

Then you do it like this:

<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>
5
4

This works for me :

<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>
2

I think you are having an issue with data-mage-init when saving or edit the content of the CMS page back.
You can use accordion in CMS page by adding accordion js to your custom theme.
Add accordion js: app/design/frontend/[Vendor_Name]/[Theme_Name]/web/js/custom.js

define([
"jquery",
"accordion",
], function ($) {
    'use strict';
    $(document).ready(function() {
        $("#accordion").accordion({
            "active": [1, 2],
            "collapsible": true,
            "openedState": "active",
            "multipleCollapsible": true
        });
    });
});

Add CMS page content:

<div id="accordion">
<div data-role="collapsible">
    <div data-role="trigger">
        <h4>Title 1</h4>
    </div>
</div>
<div data-role="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>

<div data-role="collapsible">
    <div data-role="trigger">
        <h4>Title 2</h4>
    </div>
</div>
<div data-role="content"> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

<div data-role="collapsible">
    <div data-role="trigger">
        <h4>Title 3</h4>
    </div>
</div>
<div data-role="content">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</div>
1
<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;
}

0
<div id="accordion" data-mage-init='{
    "accordion":{
        "active": [1, 2],
        "collapsible": true,
        "openedState": "active",
        "multipleCollapsible": true
    }}'>
<div data-role="collapsible">
    <div data-role="trigger">
        <h4>Title 1</h4>
    </div>
</div>
<div data-role="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>

<div data-role="collapsible">
    <div data-role="trigger">
        <h4>Title 2</h4>
    </div>
</div>
<div data-role="content"> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

<div data-role="collapsible">
    <div data-role="trigger">
        <h4>Title 3</h4>
    </div>
</div>
<div data-role="content">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.