Accordion

Аккордеон

Для свернутого состояния

<div class="ml-accordion">
    <div class="ml-accordion__head" data-accordion-head>
        <h4>Title H4</h4>
        <div class="ml-accordion__arrow">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                <path d="M9.239 19L8 17.6904 15.759 11 24 17.5802l-1.1859 1.3536-7.0086-5.596z"></path>
            </svg>
        </div>
    </div>
    <div class="ml-accordion-mask" data-accordion-body>
        <div class="ml-accordion__body">
            <p>– Стать клиентом «МегаФона» как физическое лицо можно как с сохранением своего номера другого оператора,
                либо заключив новый договор с «МегаФон» на выбранный вами тарифный план.</p>
            <p>
                – Чтобы заключить договор и стать корпоративным клиентом, вы можете <br>
                подписать договор в электронной форме.
            </p>
        </div>
    </div>
</div>

Для развернутого состояния

<div class="ml-accordion is-open">
    <div class="ml-accordion__head" data-accordion-head>
        <h4>Title H4</h4>
        <div class="ml-accordion__arrow">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                <path d="M9.239 19L8 17.6904 15.759 11 24 17.5802l-1.1859 1.3536-7.0086-5.596z"></path>
            </svg>
        </div>
    </div>
    <div class="ml-accordion-mask" data-accordion-body>
        <div class="ml-accordion__body">
            <p>– Стать клиентом «МегаФона» как физическое лицо можно как с сохранением своего номера другого оператора,
                либо заключив новый договор с «МегаФон» на выбранный вами тарифный план.</p>
            <p>
                – Чтобы заключить договор и стать корпоративным клиентом, вы можете <br>
                подписать договор в электронной форме.
            </p>
        </div>
    </div>
</div>

Accordion-mini

Аккордеон

<div class="ml-accordion-mini">
    <div class="ml-accordion-mini__head" data-accordion-head>
        <h4>Title H4</h4>
        <div class="ml-accordion-mini__arrow">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                <path d="M9.239 19L8 17.6904 15.759 11 24 17.5802l-1.1859 1.3536-7.0086-5.596z"></path>
            </svg>
        </div>
    </div>
    <div class="ml-accordion-mask" data-accordion-body>
        <div class="ml-accordion-mini__body">
            <p>– Стать клиентом «МегаФона» как физическое лицо можно как с сохранением своего номера другого оператора, либо заключив новый договор с «МегаФон» на выбранный вами тарифный план.</p>
            <p>
                – Чтобы заключить договор и стать корпоративным клиентом, вы можете <br>
                подписать договор в электронной форме.
            </p>
        </div>
    </div>
</div>

Расширенные настройки

• data-accordion-head - атрибут заголовков
• data-accordion-body - атрибут контейнеров контента
• is-open - класс делает открытым выбранный пункт

npm репозиторий - [https://www.npmjs.com/package/@megalabs/ml-accordion] (https://www.npmjs.com/package/@megalabs/ml-accordion)

Для установки пакета

• npm i @megalabs/ml-accordion
• затем в папке @megalabs/ml-accordion запускаем npm install
• npm start