0

I am creating an FAQ page as a CMS page and want to use the native Magento accordian function however I also want each faq to have a plus minus to indicate it can be open/closed.

I know the accordian code is like below:

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

I found a document about adding a plus minus to a collapsable div but not sure how to use it with the accordion() function?

Initialize the collapsible with the icons option specified:
$("#element").collapsible({ icons: {"header": "plus", "activeHeader": "minus"}});

How to do it ?

1

Just initialize your accordion widget as follows

<div id="accordion" data-mage-init='{
    "accordion":{
        "active": [1, 2],
        "collapsible": true,
        "openedState": "active",
        "multipleCollapsible": true,
        "icons": {"header": "plus", "activeHeader": "minus"}
    }}'>

This will add a span <span class="plus" data-role="icons"></span> to your collapsible element

Magento accordion widget is an extension of the Magento Tabs widget with some additional options

https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/widgets/widget_accordion.html#accordion_options

Magento Tabs widget uses the Magento collapsible widget

https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/widgets/widget_tabs.html#fedg_tabs_options-icons

0

No need to do any thing by js/ jQuery. You can only just use css as below.

#accordion h4:after {
    content: '\002D';
    display: inline-block;
    float: right;
}

#accordion .active h4:after {
    content: '\002B';
    display: inline-block;
    float: right;
}

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.