ম্যাজেন্টো 2 - অ্যাকর্ডিয়নের সাথে কীভাবে FAQ পৃষ্ঠা তৈরি করবেন

Question

আমি অ্যাকর্ডিয়ান উইজেট ( http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/widgets/widget_accordion.html ) দিয়ে একটি FAQ পৃষ্ঠা তৈরি করতে চাই ।

এটি কি কোনও সিএমএস পৃষ্ঠায় ব্যবহার করা সম্ভব?

Answer 1

এটা সম্ভব. আপনি যদি ব্যবহার করতে চান

data-mage-init

তারপরে আপনি এটি এর মতো করুন:

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

Comments

ডেটা-ভূমিকা কী

— জাইসা

ডেটা-ম্যাজ-ইআর

— আইভা

সম্পর্কে তা এখানে আরও পড়তে devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/...

— Iva

এটি উত্তর হিসাবে চিহ্নিত করা উচিত।

— মিগুয়েল ফেলিপ গিলেন কালো

Answer 2

এটি আমার পক্ষে কাজ করে:

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

Answer 3

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