Accordion

This is an accordion design template.

Example

YYYY/MM/DD
HEADING TEXT WITH INNER TEXT

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
YYYY/MM/DD
HEADING TEXT

HTML

<div class="accordion">
  <ul class="list">
    <li class="item">
      <div class="heading-box has-content">
        <time class="date">YYYY/MM/DD</time>
        <h3 class="heading">HEADING TEXT WITH INNER TEXT</h3>
        <svg class="icon rotate-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><use xlink:href="/img/icon/icons.svg#arrowDown"/></svg>
      </div>
      <div class="content-box">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT<br>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</div>
    </li>
    <li class="item">
      <div class="heading-box">
        <time class="date">YYYY/MM/DD</time>
        <h3 class="heading">HEADING TEXT</h3>
      </div>
    </li>
  </ul>
</div>

Install

npm

Console

> npm i @noknow/web-design-accordion

Import

CSS

@import '/YOUR_PROJECT/node_modules/@noknow/web-design-accordion/style.css';

JavaScript

import { Accordion } from '/YOUR_PROJECT/node_modules/@noknow/web-design-accordion/index.js';