UNPKG

handy-collapse/index.html

Version:

1<!DOCTYPE html>
2<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Handy Collapse</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" />
  <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>
10
  <style>
    .container {
      max-width: 800px;
    }
    .box {
      background: #f2f2f2;
      box-shadow: none;
    }
    .code-sample {
      background-color: #333;
      margin-bottom: 2em;
      border-radius: 4px;
    }
    .tab-button.is-active {
      pointer-events: none;
    }
    .tab-content .box {
      opacity: 0;
      transform: translateY(20px);
      transition: 0.5s;
    }
    .tab-content.is-active .box {
      opacity: 1;
      transform: translateY(0px);
    }
  </style>
  <script type="module" src="/src/index.ts"></script>
  <script type="module">
    import HandyCollapse from "/src/index";
    document.addEventListener(
      "DOMContentLoaded",
      () => {
        //Basic Accordion
        const basic = new HandyCollapse();
        //Nested
        const nested = new HandyCollapse({
          nameSpace: "nested",
          closeOthers: false
        });
        //Callback
        const callback = new HandyCollapse({
          nameSpace: "callback",
          closeOthers: false,
          onSlideStart: (isOpen, contentID) => {
            console.log(isOpen);
            const buttonEl = document.querySelector(`[data-callback-control='${contentID}']`);
            if (!buttonEl) return;
            if (isOpen) {
              buttonEl.textContent = "Opened " + contentID;
            } else {
              buttonEl.textContent = "Closed " + contentID;
            }
          }
        });
        //Callback
        const tab = new HandyCollapse({
          nameSpace: "tab",
          closeOthers: true,
          isAnimation: false
        });
      },
      false
    );
  </script>
</head>
76
<body>
  <div class="container">
    <!-- Basic -->
    <section class="section">
      <h1 class="title is-1">Basic Accordion</h1>
      <pre class="code-sample"><code class="prettyprint">new HandyCollapse(); // default options</code></pre>
      <!-- if add activeClass(def: "is-active"), Opened on init. -->
      <button
        type="button"
        class="button is-primary is-fullwidth is-medium"
        data-hc-control="content01"
        aria-expanded="true"
        aria-controls="basicContent01"
      >
        Content 01
      </button>
93
      <div id="basicContent01" class="is-active" data-hc-content="content01" aria-hidden="false">
        <div class="box">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.<br />
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute<br />
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
            sint occaecat<br />
            cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
      <button
        type="button"
        class="button is-primary is-fullwidth is-medium"
        data-hc-control="content02"
        aria-expanded="false"
        aria-controls="basicContent02"
      >
        Content 02
      </button>
116
      <div id="basicContent02" data-hc-content="content02" aria-hidden="true">
        <div class="box">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.<br />
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute<br />
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
            sint occaecat<br />
            cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
      <button
        type="button"
        class="button is-primary is-fullwidth is-medium"
        data-hc-control="content03"
        aria-expanded="false"
        aria-controls="basicContent03"
      >
        Content 03
      </button>
      <div id="basicContent03" data-hc-content="content03" aria-hidden="true">
        <div class="box">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
            fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.
          </p>
        </div>
      </div>
    </section>
    <hr />
    <!-- Nested -->
    <section class="section">
      <h1 class="title is-1">Nested Accordion</h1>
      <pre class="code-sample"><code class="prettyprint">const nested = new HandyCollapse({
  nameSpace: "nested",
  closeOthers: false
158});</code></pre>
      <button
        type="button"
        class="button is-primary is-fullwidth is-medium"
        data-nested-control="content01"
        aria-expanded="false"
        aria-controls="nestedCotent01"
      >
        Content 01
      </button>
168
      <div id="nestedCotent01" data-nested-content="content01" aria-hidden="true">
        <div class="box">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.<br />
            Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis auteirure<br />
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
            occaecatcupidatat<br />
            non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
          </p>
          <button
            type="button"
            class="button is-info is-fullwidth is-medium"
            data-nested-control="child01"
            aria-expanded="false"
            aria-controls="nestedChild01"
          >
            Child Content 01
          </button>
          <div id="nestedChild01" data-nested-content="child01" aria-hidden="true">
            <div class="box" style="background-color: #fff">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua.<br />
                Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis auteirure<br />
                dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
                occaecatcupidatat<br />
                non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>
            </div>
          </div>
        </div>
      </div>
204
      <button
        type="button"
        class="button is-primary is-fullwidth is-medium"
        data-nested-control="content02"
        aria-expanded="false"
        aria-controls="nestedCotent02"
      >
        Content 02
      </button>
214
      <div id="nestedCotent02" data-nested-content="content02" aria-hidden="true">
        <div class="box">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.<br />
            Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis auteirure<br />
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
            occaecatcupidatat<br />
            non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
          </p>
          <button
            type="button"
            class="button is-info is-fullwidth is-medium"
            data-nested-control="child02"
            aria-expanded="false"
            aria-controls="nestedChild02"
          >
            Child Content 02
          </button>
          <div id="nestedChild02" data-nested-content="child02" aria-hidden="true">
            <div class="box" style="background-color: #fff">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua.<br />
                Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis auteirure<br />
                dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
                occaecatcupidatat<br />
                non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
              </p>
              <button
                type="button"
                class="button is-warning is-fullwidth is-medium"
                data-nested-control="grandChild02"
                aria-expanded="false"
                aria-controls="nestedGrandChild02"
              >
                GrandChild Content 02
              </button>
              <div id="nestedGrandChild02" data-nested-content="grandChild02" aria-hidden="true">
                <div class="box" style="background-color: #fff">
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore et dolore magna aliqua.<br />
                    Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis auteirure<br />
                    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                    sint occaecatcupidatat<br />
                    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <hr />
    <!-- Callback -->
    <section class="section">
      <h1 class="title is-1">Callback</h1>
      <pre class="code-sample"><code class="prettyprint lang-js"> const callback = new HandyCollapse({
  nameSpace: "callback",
  closeOthers: false,
  onSlideStart: (isOpen, contentID) => {
      console.log(isOpen);
      let buttonEl = document.querySelector(`[data-callback-control='${contentID}']`);
      if (!buttonEl) return;
      if (isOpen) {
          buttonEl.textContent = "Opened " + contentID;
      } else {
          buttonEl.textContent = "Closed " + contentID;
      }
  }
290});</code></pre>
      <button
        type="button"
        class="button is-primary is-fullwidth is-medium"
        data-callback-control="content01"
        aria-expanded="false"
        aria-controls="callbackContent01"
      >
        Closed content01
      </button>
      <div id="callbackContent01" data-callback-content="content01" aria-hidden="true">
        <div class="box">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.<br />
            Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis auteirure<br />
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
            occaecatcupidatat<br />
            non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
313
      <button
        type="button"
        class="button is-primary is-fullwidth is-medium"
        data-callback-control="content02"
        aria-expanded="false"
        aria-controls="callbackContent02"
      >
        Closed content02
      </button>
      <div id="callbackContent02" data-callback-content="content02" aria-hidden="true">
        <div class="box">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.<br />
            Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis auteirure<br />
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
            occaecatcupidatat<br />
            non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </section>
    <hr />
    <!-- Tab -->
    <section class="section">
      <h1 class="title is-1">Tab</h1>
      <pre class="code-sample"><code class="prettyprint lang-js">const tab = new HandyCollapse({
  nameSpace: "tab",
  closeOthers: true,
  isAnimation: false
345});</code></pre>
      <pre class="code-sample"><code class="prettyprint lang-css"> .tab-button.is-active {
  pointer-events: none;
348}
tab-content .box {
  opacity: 0;
  transform: translateY(20px);
  transition: .5s;
353}
tab-content.is-active .box {
  opacity: 1;
  transform: translateY(0px);
357}</code></pre>
358
      <div class="columns">
        <div class="column">
          <button
            type="button"
            class="button is-primary is-fullwidth is-medium tab-button is-active"
            data-tab-control="content01"
            aria-expanded="false"
            aria-controls="tabContent01"
          >
            Tab 01
          </button>
        </div>
        <div class="column">
          <button
            type="button"
            class="button is-primary is-fullwidth is-medium tab-button"
            data-tab-control="content02"
            aria-expanded="false"
            aria-controls="tabContent02"
          >
            Tab 02
          </button>
        </div>
        <div class="column">
          <button
            type="button"
            class="button is-primary is-fullwidth is-medium tab-button"
            data-tab-control="content03"
            aria-expanded="false"
            aria-controls="tabContent03"
          >
            Tab 03
          </button>
        </div>
      </div>
      <div id="tabContent01" data-tab-content="content01" class="is-active tab-content" aria-hidden="true">
        <div class="box">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.<br />
            Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis auteirure<br />
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
            occaecatcupidatat<br />
            non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
407
      <div id="tabContent02" data-tab-content="content02" class="tab-content" aria-hidden="true">
        <div class="box">
          <p>
            laboris nisi ut aliquip ex ea commodo consequat. Duis auteirure<br />
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.<br />
            Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis auteirure<br />
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
            occaecatcupidatat<br />
            non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet,
            consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
            Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis auteirure<br />
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
            occaecatcupidatat<br />
            non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
      <div id="tabContent03" data-tab-content="content03" class="tab-content" aria-hidden="true">
        <div class="box">
          <p>
            Excepteur sint occaecatcupidatat<br />
            non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet,
            consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
            Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis auteirure<br />
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
            occaecatcupidatat<br />
            non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </div>
      </div>
    </section>
  </div>
  <footer class="footer">
    <div class="content has-text-centered">
      <p>
        This Page is example for<br />
        <a href="https://github.com/sk-rt/handy-collapse"> <strong>handy-collapse.js</strong></a>
      </p>
    </div>
  </footer>
</body>
453</html>

1	`<!DOCTYPE html>`
2	`<html lang="en">`
3	`<head>`
4	`<meta charset="UTF-8" />`
5	`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`
6	`<meta http-equiv="X-UA-Compatible" content="ie=edge" />`
7	`<title>Handy Collapse</title>`
8	`<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" />`
9	`<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>`
10
11	`<style>`
12	`.container {`
13	`max-width: 800px;`
14	`}`
15	`.box {`
16	`background: #f2f2f2;`
17	`box-shadow: none;`
18	`}`
19	`.code-sample {`
20	`background-color: #333;`
21	`margin-bottom: 2em;`
22	`border-radius: 4px;`
23	`}`
24	`.tab-button.is-active {`
25	`pointer-events: none;`
26	`}`
27	`.tab-content .box {`
28	`opacity: 0;`
29	`transform: translateY(20px);`
30	`transition: 0.5s;`
31	`}`
32	`.tab-content.is-active .box {`
33	`opacity: 1;`
34	`transform: translateY(0px);`
35	`}`
36	`</style>`
37	`<script type="module" src="/src/index.ts"></script>`
38	`<script type="module">`
39	`import HandyCollapse from "/src/index";`
40	`document.addEventListener(`
41	`"DOMContentLoaded",`
42	`() => {`
43	`//Basic Accordion`
44	`const basic = new HandyCollapse();`
45	`//Nested`
46	`const nested = new HandyCollapse({`
47	`nameSpace: "nested",`
48	`closeOthers: false`
49	`});`
50	`//Callback`
51	`const callback = new HandyCollapse({`
52	`nameSpace: "callback",`
53	`closeOthers: false,`
54	`onSlideStart: (isOpen, contentID) => {`
55	`console.log(isOpen);`
56	const buttonEl = document.querySelector(`[data-callback-control='${contentID}']`);
57	`if (!buttonEl) return;`
58	`if (isOpen) {`
59	`buttonEl.textContent = "Opened " + contentID;`
60	`} else {`
61	`buttonEl.textContent = "Closed " + contentID;`
62	`}`
63	`}`
64	`});`
65	`//Callback`
66	`const tab = new HandyCollapse({`
67	`nameSpace: "tab",`
68	`closeOthers: true,`
69	`isAnimation: false`
70	`});`
71	`},`
72	`false`
73	`);`
74	`</script>`
75	`</head>`
76
77	`<body>`
78	`<div class="container">`
79	`<!-- Basic -->`
80	`<section class="section">`
81	`<h1 class="title is-1">Basic Accordion</h1>`
82	`<pre class="code-sample"><code class="prettyprint">new HandyCollapse(); // default options</code></pre>`
83	`<!-- if add activeClass(def: "is-active"), Opened on init. -->`
84	`<button`
85	`type="button"`
86	`class="button is-primary is-fullwidth is-medium"`
87	`data-hc-control="content01"`
88	`aria-expanded="true"`
89	`aria-controls="basicContent01"`
90	`>`
91	`Content 01`
92	`</button>`
93
94	`<div id="basicContent01" class="is-active" data-hc-content="content01" aria-hidden="false">`
95	`<div class="box">`
96	`<p>`
97	`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et`
98	`dolore magna aliqua.<br />`
99	`Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo`
100	`consequat. Duis aute<br />`
101	`irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur`
102	`sint occaecat<br />`
103	`cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
104	`</p>`
105	`</div>`
106	`</div>`
107	`<button`
108	`type="button"`
109	`class="button is-primary is-fullwidth is-medium"`
110	`data-hc-control="content02"`
111	`aria-expanded="false"`
112	`aria-controls="basicContent02"`
113	`>`
114	`Content 02`
115	`</button>`
116
117	`<div id="basicContent02" data-hc-content="content02" aria-hidden="true">`
118	`<div class="box">`
119	`<p>`
120	`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et`
121	`dolore magna aliqua.<br />`
122	`Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo`
123	`consequat. Duis aute<br />`
124	`irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur`
125	`sint occaecat<br />`
126	`cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
127	`</p>`
128	`</div>`
129	`</div>`
130	`<button`
131	`type="button"`
132	`class="button is-primary is-fullwidth is-medium"`
133	`data-hc-control="content03"`
134	`aria-expanded="false"`
135	`aria-controls="basicContent03"`
136	`>`
137	`Content 03`
138	`</button>`
139	`<div id="basicContent03" data-hc-content="content03" aria-hidden="true">`
140	`<div class="box">`
141	`<p>`
142	`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et`
143	`dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex`
144	`ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu`
145	`fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt`
146	`mollit anim id est laborum.`
147	`</p>`
148	`</div>`
149	`</div>`
150	`</section>`
151	`<hr />`
152	`<!-- Nested -->`
153	`<section class="section">`
154	`<h1 class="title is-1">Nested Accordion</h1>`
155	`<pre class="code-sample"><code class="prettyprint">const nested = new HandyCollapse({`
156	`nameSpace: "nested",`
157	`closeOthers: false`
158	`});</code></pre>`
159	`<button`
160	`type="button"`
161	`class="button is-primary is-fullwidth is-medium"`
162	`data-nested-control="content01"`
163	`aria-expanded="false"`
164	`aria-controls="nestedCotent01"`
165	`>`
166	`Content 01`
167	`</button>`
168
169	`<div id="nestedCotent01" data-nested-content="content01" aria-hidden="true">`
170	`<div class="box">`
171	`<p>`
172	`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et`
173	`dolore magna aliqua.<br />`
174	`Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`
175	`Duis auteirure<br />`
176	`dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint`
177	`occaecatcupidatat<br />`
178	`non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />`
179	`</p>`
180	`<button`
181	`type="button"`
182	`class="button is-info is-fullwidth is-medium"`
183	`data-nested-control="child01"`
184	`aria-expanded="false"`
185	`aria-controls="nestedChild01"`
186	`>`
187	`Child Content 01`
188	`</button>`
189	`<div id="nestedChild01" data-nested-content="child01" aria-hidden="true">`
190	`<div class="box" style="background-color: #fff">`
191	`<p>`
192	`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et`
193	`dolore magna aliqua.<br />`
194	`Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo`
195	`consequat. Duis auteirure<br />`
196	`dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint`
197	`occaecatcupidatat<br />`
198	`non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
199	`</p>`
200	`</div>`
201	`</div>`
202	`</div>`
203	`</div>`
204
205	`<button`
206	`type="button"`
207	`class="button is-primary is-fullwidth is-medium"`
208	`data-nested-control="content02"`
209	`aria-expanded="false"`
210	`aria-controls="nestedCotent02"`
211	`>`
212	`Content 02`
213	`</button>`
214
215	`<div id="nestedCotent02" data-nested-content="content02" aria-hidden="true">`
216	`<div class="box">`
217	`<p>`
218	`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et`
219	`dolore magna aliqua.<br />`
220	`Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`
221	`Duis auteirure<br />`
222	`dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint`
223	`occaecatcupidatat<br />`
224	`non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />`
225	`</p>`
226	`<button`
227	`type="button"`
228	`class="button is-info is-fullwidth is-medium"`
229	`data-nested-control="child02"`
230	`aria-expanded="false"`
231	`aria-controls="nestedChild02"`
232	`>`
233	`Child Content 02`
234	`</button>`
235	`<div id="nestedChild02" data-nested-content="child02" aria-hidden="true">`
236	`<div class="box" style="background-color: #fff">`
237	`<p>`
238	`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et`
239	`dolore magna aliqua.<br />`
240	`Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo`
241	`consequat. Duis auteirure<br />`
242	`dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint`
243	`occaecatcupidatat<br />`
244	`non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />`
245	`</p>`
246	`<button`
247	`type="button"`
248	`class="button is-warning is-fullwidth is-medium"`
249	`data-nested-control="grandChild02"`
250	`aria-expanded="false"`
251	`aria-controls="nestedGrandChild02"`
252	`>`
253	`GrandChild Content 02`
254	`</button>`
255	`<div id="nestedGrandChild02" data-nested-content="grandChild02" aria-hidden="true">`
256	`<div class="box" style="background-color: #fff">`
257	`<p>`
258	`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut`
259	`labore et dolore magna aliqua.<br />`
260	`Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo`
261	`consequat. Duis auteirure<br />`
262	`dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur`
263	`sint occaecatcupidatat<br />`
264	`non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
265	`</p>`
266	`</div>`
267	`</div>`
268	`</div>`
269	`</div>`
270	`</div>`
271	`</div>`
272	`</section>`
273	`<hr />`
274	`<!-- Callback -->`
275	`<section class="section">`
276	`<h1 class="title is-1">Callback</h1>`
277	`<pre class="code-sample"><code class="prettyprint lang-js"> const callback = new HandyCollapse({`
278	`nameSpace: "callback",`
279	`closeOthers: false,`
280	`onSlideStart: (isOpen, contentID) => {`
281	`console.log(isOpen);`
282	let buttonEl = document.querySelector(`[data-callback-control='${contentID}']`);
283	`if (!buttonEl) return;`
284	`if (isOpen) {`
285	`buttonEl.textContent = "Opened " + contentID;`
286	`} else {`
287	`buttonEl.textContent = "Closed " + contentID;`
288	`}`
289	`}`
290	`});</code></pre>`
291	`<button`
292	`type="button"`
293	`class="button is-primary is-fullwidth is-medium"`
294	`data-callback-control="content01"`
295	`aria-expanded="false"`
296	`aria-controls="callbackContent01"`
297	`>`
298	`Closed content01`
299	`</button>`
300	`<div id="callbackContent01" data-callback-content="content01" aria-hidden="true">`
301	`<div class="box">`
302	`<p>`
303	`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et`
304	`dolore magna aliqua.<br />`
305	`Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`
306	`Duis auteirure<br />`
307	`dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint`
308	`occaecatcupidatat<br />`
309	`non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
310	`</p>`
311	`</div>`
312	`</div>`
313
314	`<button`
315	`type="button"`
316	`class="button is-primary is-fullwidth is-medium"`
317	`data-callback-control="content02"`
318	`aria-expanded="false"`
319	`aria-controls="callbackContent02"`
320	`>`
321	`Closed content02`
322	`</button>`
323	`<div id="callbackContent02" data-callback-content="content02" aria-hidden="true">`
324	`<div class="box">`
325	`<p>`
326	`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et`
327	`dolore magna aliqua.<br />`
328	`Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`
329	`Duis auteirure<br />`
330	`dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint`
331	`occaecatcupidatat<br />`
332	`non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
333	`</p>`
334	`</div>`
335	`</div>`
336	`</section>`
337	`<hr />`
338	`<!-- Tab -->`
339	`<section class="section">`
340	`<h1 class="title is-1">Tab</h1>`
341	`<pre class="code-sample"><code class="prettyprint lang-js">const tab = new HandyCollapse({`
342	`nameSpace: "tab",`
343	`closeOthers: true,`
344	`isAnimation: false`
345	`});</code></pre>`
346	`<pre class="code-sample"><code class="prettyprint lang-css"> .tab-button.is-active {`
347	`pointer-events: none;`
348	`}`
349	`.tab-content .box {`
350	`opacity: 0;`
351	`transform: translateY(20px);`
352	`transition: .5s;`
353	`}`
354	`.tab-content.is-active .box {`
355	`opacity: 1;`
356	`transform: translateY(0px);`
357	`}</code></pre>`
358
359	`<div class="columns">`
360	`<div class="column">`
361	`<button`
362	`type="button"`
363	`class="button is-primary is-fullwidth is-medium tab-button is-active"`
364	`data-tab-control="content01"`
365	`aria-expanded="false"`
366	`aria-controls="tabContent01"`
367	`>`
368	`Tab 01`
369	`</button>`
370	`</div>`
371	`<div class="column">`
372	`<button`
373	`type="button"`
374	`class="button is-primary is-fullwidth is-medium tab-button"`
375	`data-tab-control="content02"`
376	`aria-expanded="false"`
377	`aria-controls="tabContent02"`
378	`>`
379	`Tab 02`
380	`</button>`
381	`</div>`
382	`<div class="column">`
383	`<button`
384	`type="button"`
385	`class="button is-primary is-fullwidth is-medium tab-button"`
386	`data-tab-control="content03"`
387	`aria-expanded="false"`
388	`aria-controls="tabContent03"`
389	`>`
390	`Tab 03`
391	`</button>`
392	`</div>`
393	`</div>`
394	`<div id="tabContent01" data-tab-content="content01" class="is-active tab-content" aria-hidden="true">`
395	`<div class="box">`
396	`<p>`
397	`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et`
398	`dolore magna aliqua.<br />`
399	`Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`
400	`Duis auteirure<br />`
401	`dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint`
402	`occaecatcupidatat<br />`
403	`non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
404	`</p>`
405	`</div>`
406	`</div>`
407
408	`<div id="tabContent02" data-tab-content="content02" class="tab-content" aria-hidden="true">`
409	`<div class="box">`
410	`<p>`
411	`laboris nisi ut aliquip ex ea commodo consequat. Duis auteirure<br />`
412	`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et`
413	`dolore magna aliqua.<br />`
414	`Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`
415	`Duis auteirure<br />`
416	`dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint`
417	`occaecatcupidatat<br />`
418	`non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet,`
419	`consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />`
420	`Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`
421	`Duis auteirure<br />`
422	`dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint`
423	`occaecatcupidatat<br />`
424	`non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
425	`</p>`
426	`</div>`
427	`</div>`
428	`<div id="tabContent03" data-tab-content="content03" class="tab-content" aria-hidden="true">`
429	`<div class="box">`
430	`<p>`
431	`Excepteur sint occaecatcupidatat<br />`
432	`non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet,`
433	`consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />`
434	`Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`
435	`Duis auteirure<br />`
436	`dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint`
437	`occaecatcupidatat<br />`
438	`non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
439	`</p>`
440	`</div>`
441	`</div>`
442	`</section>`
443	`</div>`
444	`<footer class="footer">`
445	`<div class="content has-text-centered">`
446	`<p>`
447	`This Page is example for<br />`
448	`<a href="https://github.com/sk-rt/handy-collapse"> <strong>handy-collapse.js</strong></a>`
449	`</p>`
450	`</div>`
451	`</footer>`
452	`</body>`
453	`</html>`