"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7553],{3905:function(e,a,t){t.d(a,{Zo:function(){return l},kt:function(){return u}});var o=t(7294);function i(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function n(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);a&&(o=o.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),t.push.apply(t,o)}return t}function s(e){for(var a=1;a<arguments.length;a++){var t=null!=arguments[a]?arguments[a]:{};a%2?n(Object(t),!0).forEach((function(a){i(e,a,t[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):n(Object(t)).forEach((function(a){Object.defineProperty(e,a,Object.getOwnPropertyDescriptor(t,a))}))}return e}function r(e,a){if(null==e)return{};var t,o,i=function(e,a){if(null==e)return{};var t,o,i={},n=Object.keys(e);for(o=0;o<n.length;o++)t=n[o],a.indexOf(t)>=0||(i[t]=e[t]);return i}(e,a);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)t=n[o],a.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}var c=o.createContext({}),d=function(e){var a=o.useContext(c),t=a;return e&&(t="function"==typeof e?e(a):s(s({},a),e)),t},l=function(e){var a=d(e.components);return o.createElement(c.Provider,{value:a},e.children)},m={inlineCode:"code",wrapper:function(e){var a=e.children;return o.createElement(o.Fragment,{},a)}},h=o.forwardRef((function(e,a){var t=e.components,i=e.mdxType,n=e.originalType,c=e.parentName,l=r(e,["components","mdxType","originalType","parentName"]),h=d(t),u=i,p=h["".concat(c,".").concat(u)]||h[u]||m[u]||n;return t?o.createElement(p,s(s({ref:a},l),{},{components:t})):o.createElement(p,s({ref:a},l))}));function u(e,a){var t=arguments,i=a&&a.mdxType;if("string"==typeof e||i){var n=t.length,s=new Array(n);s[0]=h;var r={};for(var c in a)hasOwnProperty.call(a,c)&&(r[c]=a[c]);r.originalType=e,r.mdxType="string"==typeof e?e:i,s[1]=r;for(var d=2;d<n;d++)s[d]=t[d];return o.createElement.apply(null,s)}return o.createElement.apply(null,t)}h.displayName="MDXCreateElement"},2695:function(e,a,t){t.d(a,{Z:function(){return r}});var o=t(7462),i=t(3366),n=t(7294),s=["isBad","isGood","children","disableFullscreen","limitWidth"];function r(e){var a=e.isBad,t=e.isGood,r=e.children,c=e.disableFullscreen,d=e.limitWidth,l=(0,i.Z)(e,s),m=(0,n.useState)(!1),h=m[0],u=m[1];return n.createElement("div",{className:"preview-box-wrapper",style:d?{width:d,display:"table",margin:"0 auto"}:{}},!c&&n.createElement("button",{"aria-label":h?"Minimize the example":"Fullscreen the example",className:"preview-box-fullscreen-toggle",onClick:function(e){var a=e.target.closest(".preview-box-wrapper");h?document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen():a.requestFullscreen?a.requestFullscreen():a.webkitRequestFullscreen?a.webkitRequestFullscreen():a.msRequestFullscreen&&a.msRequestFullscreen(),u(!h)}},h?n.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 24 24"},n.createElement("path",{d:"M19.707 18.293a1 1 0 01-1.414 1.414L16 17.414V18a1 1 0 01-2 0v-3a1 1 0 011-1h3a1 1 0 010 2h-.586zM9 14H6a1 1 0 000 2h.586l-2.293 2.293a1 1 0 001.414 1.414L8 17.414V18a1 1 0 002 0v-3a1 1 0 00-1-1zm0-9a1 1 0 00-1 1v.586L5.707 4.293a1 1 0 00-1.414 1.414L6.586 8H6a1 1 0 000 2h3a1 1 0 001-1V6a1 1 0 00-1-1zm6 5h3a1 1 0 000-2h-.586l2.293-2.293a1 1 0 00-1.414-1.414L16 6.586V6a1 1 0 00-2 0v3a1 1 0 001 1z"})):n.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"26 26 48 48"},n.createElement("path",{d:"M54.347 57.882A8.96 8.96 0 0150 59a8.96 8.96 0 01-4.347-1.118L40.736 62.8c-.38.38-.257.701.29.701h.98A2.503 2.503 0 0144.5 66c0 1.39-1.122 2.5-2.507 2.5h-7.986a2.505 2.505 0 01-2.507-2.507v-7.986A2.502 2.502 0 0134 55.5a2.49 2.49 0 012.5 2.493v.98c0 .547.314.678.7.29l4.918-4.916A8.96 8.96 0 0141 50a8.96 8.96 0 011.118-4.347L37.2 40.736c-.38-.38-.701-.257-.701.29v.98A2.503 2.503 0 0134 44.5c-1.39 0-2.5-1.122-2.5-2.507v-7.986a2.505 2.505 0 012.507-2.507h7.986A2.502 2.502 0 0144.5 34a2.49 2.49 0 01-2.493 2.5h-.98c-.547 0-.678.314-.29.7l4.916 4.918A8.96 8.96 0 0150 41a8.96 8.96 0 014.347 1.118l4.917-4.917c.38-.38.257-.701-.29-.701h-.98A2.503 2.503 0 0155.5 34c0-1.39 1.122-2.5 2.507-2.5h7.986a2.505 2.505 0 012.507 2.507v7.986A2.502 2.502 0 0166 44.5a2.49 2.49 0 01-2.5-2.493v-.98c0-.547-.314-.678-.7-.29l-4.918 4.916A8.96 8.96 0 0159 50a8.96 8.96 0 01-1.118 4.347l4.917 4.917c.38.38.701.257.701-.29v-.98A2.503 2.503 0 0166 55.5c1.39 0 2.5 1.122 2.5 2.507v7.986a2.505 2.505 0 01-2.507 2.507h-7.986A2.502 2.502 0 0155.5 66a2.49 2.49 0 012.493-2.5h.98c.547 0 .678-.314.29-.7l-4.916-4.918zM50 54a4 4 0 100-8 4 4 0 000 8z"}))),a&&n.createElement("div",{className:"is-bad-example style-red"},n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"2 2 12 12"},n.createElement("path",{d:"M3.3 12.7c.2.2.4.3.7.3s.5-.1.7-.3L8 9.4l3.3 3.3c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L9.4 8l3.3-3.3c.4-.4.4-1 0-1.4s-1-.4-1.4 0L8 6.6 4.7 3.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4L6.6 8l-3.3 3.3c-.4.4-.4 1 0 1.4z"}))),t&&n.createElement("div",{className:"is-good-example style-green"},n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 18 18"},n.createElement("path",{d:"M5.056 15.04a1.5 1.5 0 002.217-.119l10.17-12.476A1.5 1.5 0 0015.118.55L6.007 11.758l-3.453-3.41a1.5 1.5 0 10-2.109 2.133l4.611 4.56"}))),n.createElement("iframe",(0,o.Z)({width:"100%",className:"docus-preview-box"+(h?" is-fullscreen":""),srcDoc:r},l)))}},7445:function(e,a,t){t.r(a),t.d(a,{frontMatter:function(){return c},contentTitle:function(){return d},metadata:function(){return l},toc:function(){return m},default:function(){return u}});var o=t(7462),i=t(3366),n=(t(7294),t(3905)),s=t(2695),r=["components"],c={title:"Accordion"},d=void 0,l={unversionedId:"components/accordion",id:"components/accordion",isDocsHomePage:!1,title:"Accordion",description:"Accordions are vertically collapsible components that contain content inside, they come in handy for a lot of situations as an example the list of FAQ or small screen devices submenus.",source:"@site/docs/components/accordion.mdx",sourceDirName:"components",slug:"/components/accordion",permalink:"/docs/components/accordion",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/components/accordion.mdx",tags:[],version:"current",frontMatter:{title:"Accordion"},sidebar:"tutorialSidebar",previous:{title:"Search button",permalink:"/docs/components/buttons/search-button"},next:{title:"Alerts",permalink:"/docs/components/alert"}},m=[{value:"A simple accordion",id:"a-simple-accordion",children:[],level:2},{value:"Bordered",id:"bordered",children:[],level:2},{value:"Expendable",id:"expendable",children:[],level:2},{value:"Sizes",id:"sizes",children:[],level:2},{value:"Color",id:"color",children:[],level:2},{value:"Animations",id:"animations",children:[],level:2},{value:"Customization",id:"customization",children:[],level:2}],h={toc:m};function u(e){var a=e.components,t=(0,i.Z)(e,r);return(0,n.kt)("wrapper",(0,o.Z)({},h,t,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"Accordions are vertically collapsible components that contain content inside, they come in handy for a lot of situations as an example the list of FAQ or small screen devices submenus."),(0,n.kt)("h2",{id:"a-simple-accordion"},"A simple accordion"),(0,n.kt)("p",null,"To create an accordion check the below example out, you need to create an exact structure that can be customized easily."),(0,n.kt)("div",{className:"admonition admonition-success alert alert--success"},(0,n.kt)("div",{parentName:"div",className:"admonition-heading"},(0,n.kt)("h5",{parentName:"div"},(0,n.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,n.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,n.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"Toggle plus icon")),(0,n.kt)("div",{parentName:"div",className:"admonition-content"},(0,n.kt)("p",{parentName:"div"},"We use the ",(0,n.kt)("a",{parentName:"p",href:"/docs/components/buttons/add-button"},"add button component")," to have an interactive plus icon, which changes when the accordion item is opened."))),(0,n.kt)(s.Z,{height:"310px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Accordion</title> <style> .accordion{ max-width: 820px; margin: 0 auto; } </style> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body class="flex-column-center"> <div class="accordion"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-1"> Lorem ipsum dolor sit amet </button> </h2> <div id="accordion-1" class="accordion-collapse"> <div class="accordion-body"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias architecto quae tenetur voluptatum ipsa, esse doloremque numquam accusantium pariatur facere sunt earum aut iure deserunt id illum ipsam repudiandae non? </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2"> Far far away <span class="add-button"></span> </button> </h2> <div id="accordion-2" class="accordion-collapse"> <div class="accordion-body"> Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2"> The Sorrows of Young Werther <span class="add-button"></span> </button> </h2> <div id="accordion-2" class="accordion-collapse"> <div class="accordion-body"> <h3 class="size-lg">Book I</h3> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. </div> </div> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,n.kt)("div",{className:"admonition admonition-info alert alert--info"},(0,n.kt)("div",{parentName:"div",className:"admonition-heading"},(0,n.kt)("h5",{parentName:"div"},(0,n.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,n.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,n.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"Accessibility matters!")),(0,n.kt)("div",{parentName:"div",className:"admonition-content"},(0,n.kt)("p",{parentName:"div"},"To have an accessible accordion you need to have a proper structure and set a couple of HTML attributes."),(0,n.kt)("p",{parentName:"div"},"The element with the ",(0,n.kt)("inlineCode",{parentName:"p"},".accordion-toggle")," class toggles the accordion items, so it must have ",(0,n.kt)("inlineCode",{parentName:"p"},'aria-expanded="false"')," as default, JavaScript changes it to ",(0,n.kt)("inlineCode",{parentName:"p"},"true")," when the user clicks on the button.",(0,n.kt)("br",{parentName:"p"}),"\n","Furthermore ",(0,n.kt)("inlineCode",{parentName:"p"},'aria-controls="ACCORDION-COLLAPSE-ID"')," is required to set the id of the ",(0,n.kt)("inlineCode",{parentName:"p"},".accordion-collapse")," element, simply it connects accordion item content with the toggle button."))),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="accordion">\n  \x3c!-- First accordion item --\x3e\n  <div class="accordion-item">\n    <h2 class="accordion-header">\n      <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-1">\n        Lorem ipsum dolor sit amet\n        <span class="add-button"></span>\n      </button>\n    </h2>\n    <div id="accordion-1" class="accordion-collapse">\n      <div class="accordion-body">Lorem ipsum dolor sit amet consectetur ...</div>\n    </div>\n  </div>\n\n  \x3c!-- Second accordion item --\x3e\n  <div class="accordion-item">\n    <h2 class="accordion-header">\n      <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2">\n        Far far away\n        <span class="add-button"></span>\n      </button>\n    </h2>\n    <div id="accordion-2" class="accordion-collapse">\n      <div class="accordion-body">Far far away, behind the word mountains ...</div>\n    </div>\n  </div>\n\n  \x3c!-- Third accordion item --\x3e\n  <div class="accordion-item">\n    <h2 class="accordion-header">\n      <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2">\n        The Sorrows of Young Werther\n        <span class="add-button"></span>\n      </button>\n    </h2>\n    <div id="accordion-2" class="accordion-collapse">\n      <div class="accordion-body">\n        <h3 class="size-lg">Book I</h3>\n        A wonderful serenity has taken possession of my entire soul...\n      </div>\n    </div>\n  </div>\n</div>\n')),(0,n.kt)("h2",{id:"bordered"},"Bordered"),(0,n.kt)("p",null,"The default accordion does not have borders and it can be flexible to be customized but if you need more of an accordion with accordion style just add the ",(0,n.kt)("inlineCode",{parentName:"p"},".bordered")," class to the ",(0,n.kt)("inlineCode",{parentName:"p"},".accordion")," element."),(0,n.kt)(s.Z,{height:"310px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Accordion</title> <style> .accordion{ max-width: 820px; margin: 0 auto; } </style> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body class="flex-column-center"> <div class="accordion bordered"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-1"> Lorem ipsum dolor sit amet <span class="add-button"></span> </button> </h2> <div id="accordion-1" class="accordion-collapse"> <div class="accordion-body"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias architecto quae tenetur voluptatum ipsa, esse doloremque numquam accusantium pariatur facere sunt earum aut iure deserunt id illum ipsam repudiandae non? </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2"> Far far away <span class="add-button"></span> </button> </h2> <div id="accordion-2" class="accordion-collapse"> <div class="accordion-body"> Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2"> The Sorrows of Young Werther <span class="add-button"></span> </button> </h2> <div id="accordion-2" class="accordion-collapse"> <div class="accordion-body"> <h3 class="size-lg">Book I</h3> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. </div> </div> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="accordion bordered">...</div>\n')),(0,n.kt)("h2",{id:"expendable"},"Expendable"),(0,n.kt)("p",null,'As we call it "accordion" there must not be more than one item expanded item at a time. However, you can break the limit by adding the ',(0,n.kt)("inlineCode",{parentName:"p"},".expendable")," class to the ",(0,n.kt)("inlineCode",{parentName:"p"},".accordion")," element."),(0,n.kt)(s.Z,{height:"310px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Accordion</title> <style> .accordion{ max-width: 820px; margin: 0 auto; } </style> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body class="flex-column-center"> <div class="accordion bordered expendable"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-1"> Lorem ipsum dolor sit amet <span class="add-button"></span> </button> </h2> <div id="accordion-1" class="accordion-collapse"> <div class="accordion-body"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias architecto quae tenetur voluptatum ipsa, esse doloremque numquam accusantium pariatur facere sunt earum aut iure deserunt id illum ipsam repudiandae non? </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2"> Far far away <span class="add-button"></span> </button> </h2> <div id="accordion-2" class="accordion-collapse"> <div class="accordion-body"> Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2"> The Sorrows of Young Werther <span class="add-button"></span> </button> </h2> <div id="accordion-2" class="accordion-collapse"> <div class="accordion-body"> <h3 class="size-lg">Book I</h3> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. </div> </div> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="accordion bordered expendable">...</div>\n')),(0,n.kt)("h2",{id:"sizes"},"Sizes"),(0,n.kt)("p",null,"To change the accordion size use ",(0,n.kt)("a",{parentName:"p",href:"/docs/helpers/size-setters"},"size setter classes"),".\nThese classes just set a ",(0,n.kt)("inlineCode",{parentName:"p"},"font-size")," property so it is possible to change it yourself by writing custom CSS."),(0,n.kt)(s.Z,{height:"700px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Accordion</title> <style> .accordion{ max-width: 820px; margin: 1em auto 0; } </style> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body class="flex-column-center"> <div class="accordion bordered size-sm"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-1"> Lorem ipsum dolor sit amet <span class="add-button"></span> </button> </h2> <div id="accordion-1" class="accordion-collapse"> <div class="accordion-body"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias architecto quae tenetur voluptatum ipsa, esse doloremque numquam accusantium pariatur facere sunt earum aut iure deserunt id illum ipsam repudiandae non? </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2"> Far far away <span class="add-button"></span> </button> </h2> <div id="accordion-2" class="accordion-collapse"> <div class="accordion-body"> Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2"> The Sorrows of Young Werther <span class="add-button"></span> </button> </h2> <div id="accordion-2" class="accordion-collapse"> <div class="accordion-body"> <h3 class="size-lg">Book I</h3> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. </div> </div> </div> </div> <div class="accordion bordered size-lg"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-1"> Lorem ipsum dolor sit amet <span class="add-button"></span> </button> </h2> <div id="accordion-1" class="accordion-collapse"> <div class="accordion-body"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias architecto quae tenetur voluptatum ipsa, esse doloremque numquam accusantium pariatur facere sunt earum aut iure deserunt id illum ipsam repudiandae non? </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2"> Far far away <span class="add-button"></span> </button> </h2> <div id="accordion-2" class="accordion-collapse"> <div class="accordion-body"> Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2"> The Sorrows of Young Werther <span class="add-button"></span> </button> </h2> <div id="accordion-2" class="accordion-collapse"> <div class="accordion-body"> <h3 class="size-lg">Book I</h3> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. </div> </div> </div> </div> <div class="accordion bordered size-2x"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-1"> Lorem ipsum dolor sit amet <span class="add-button"></span> </button> </h2> <div id="accordion-1" class="accordion-collapse"> <div class="accordion-body"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias architecto quae tenetur voluptatum ipsa, esse doloremque numquam accusantium pariatur facere sunt earum aut iure deserunt id illum ipsam repudiandae non? </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2"> Far far away <span class="add-button"></span> </button> </h2> <div id="accordion-2" class="accordion-collapse"> <div class="accordion-body"> Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2"> The Sorrows of Young Werther <span class="add-button"></span> </button> </h2> <div id="accordion-2" class="accordion-collapse"> <div class="accordion-body"> <h3 class="size-lg">Book I</h3> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. </div> </div> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="accordion bordered size-sm">...</div>\n<div class="accordion bordered size-lg">...</div>\n<div class="accordion bordered size-2x">...</div>\n')),(0,n.kt)("h2",{id:"color"},"Color"),(0,n.kt)("p",null,"There are helper classes for styling elements like accordions, first read about ",(0,n.kt)("a",{parentName:"p",href:"/docs/helpers/color-setters"},"color setter classes")," for having button with diffrent background and text color. You can add the class to the ",(0,n.kt)("inlineCode",{parentName:"p"},".accordion")," or style each item individualy by adding it to the ",(0,n.kt)("inlineCode",{parentName:"p"},".accordion-item")," element."),(0,n.kt)(s.Z,{height:"400px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Accordion</title> <style> .accordion{ max-width: 820px; margin: 1em auto 0; } </style> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body class="flex-column-center"> <div class="accordion bordered style-dark"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-1"> Lorem ipsum dolor sit amet <span class="add-button"></span> </button> </h2> <div id="accordion-1" class="accordion-collapse"> <div class="accordion-body"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias architecto quae tenetur voluptatum ipsa, esse doloremque numquam accusantium pariatur facere sunt earum aut iure deserunt id illum ipsam repudiandae non? </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2"> Far far away <span class="add-button"></span> </button> </h2> <div id="accordion-2" class="accordion-collapse"> <div class="accordion-body"> Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2"> The Sorrows of Young Werther <span class="add-button"></span> </button> </h2> <div id="accordion-2" class="accordion-collapse"> <div class="accordion-body"> <h3 class="size-lg">Book I</h3> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. </div> </div> </div> </div> <div class="accordion bordered"> <div class="accordion-item style-red"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-1"> Lorem ipsum dolor sit amet <span class="add-button"></span> </button> </h2> <div id="accordion-1" class="accordion-collapse"> <div class="accordion-body"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias architecto quae tenetur voluptatum ipsa, esse doloremque numquam accusantium pariatur facere sunt earum aut iure deserunt id illum ipsam repudiandae non? </div> </div> </div> <div class="accordion-item style-orange"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2"> Far far away <span class="add-button"></span> </button> </h2> <div id="accordion-2" class="accordion-collapse"> <div class="accordion-body"> Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do </div> </div> </div> <div class="accordion-item style-yellow"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2"> The Sorrows of Young Werther <span class="add-button"></span> </button> </h2> <div id="accordion-2" class="accordion-collapse"> <div class="accordion-body"> <h3 class="size-lg">Book I</h3> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. </div> </div> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'\x3c!-- style the whole accordion --\x3e\n<div class="accordion bordered style-dark">...</div>\n\n\x3c!-- style each accordion item --\x3e\n<div class="accordion bordered">\n  <div class="accordion-item style-red">...</div>\n  <div class="accordion-item style-orange">...</div>\n  <div class="accordion-item style-yellow">...</div>\n</div>\n')),(0,n.kt)("h2",{id:"animations"},"Animations"),(0,n.kt)("p",null,"There are two types of animation for each accordion item: show and hide.",(0,n.kt)("br",{parentName:"p"}),"\n","The show animation is triggered when the item is expanded and the hide animation is triggered when the item is going to be collapsed. The default animation is blow in/out, also by adding the ",(0,n.kt)("inlineCode",{parentName:"p"},".fade-animation")," class to the ",(0,n.kt)("inlineCode",{parentName:"p"},".accordion")," element, you can simplify it to fade in/out."),(0,n.kt)("p",null,"Here are the CSS variables that you can change the duration with:",(0,n.kt)("br",{parentName:"p"}),"\n",(0,n.kt)("inlineCode",{parentName:"p"},"--flatify__accordion-animation-show-duration"),(0,n.kt)("br",{parentName:"p"}),"\n",(0,n.kt)("inlineCode",{parentName:"p"},"--flatify__accordion-animation-hide-duration")),(0,n.kt)("p",null,"or define a custom animation:",(0,n.kt)("br",{parentName:"p"}),"\n",(0,n.kt)("inlineCode",{parentName:"p"},"--flatify__accordion-animation-show"),(0,n.kt)("br",{parentName:"p"}),"\n",(0,n.kt)("inlineCode",{parentName:"p"},"--flatify__accordion-animation-hide")),(0,n.kt)("p",null,"The default animation is set to fade in and fade out, ",(0,n.kt)("a",{parentName:"p",href:"/docs/helpers/animation"},"the predefined animations")," of FlatifyCSS."),(0,n.kt)("p",null,"Here is an example of changing the animations:"),(0,n.kt)(s.Z,{height:"310px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Accordion</title> <style> .accordion{ max-width: 820px; margin: 0 auto; } .my-custom-animation{ --flatify__accordion-animation-show: flatify-blow-in 0.5s 0.2s; --flatify__accordion-animation-hide: flatify-blow-out 0.5s; } </style> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body class="flex-column-center"> <div class="accordion bordered my-custom-animation"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-1"> Lorem ipsum dolor sit amet <span class="add-button"></span> </button> </h2> <div id="accordion-1" class="accordion-collapse"> <div class="accordion-body"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias architecto quae tenetur voluptatum ipsa, esse doloremque numquam accusantium pariatur facere sunt earum aut iure deserunt id illum ipsam repudiandae non? </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2"> Far far away <span class="add-button"></span> </button> </h2> <div id="accordion-2" class="accordion-collapse"> <div class="accordion-body"> Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2"> The Sorrows of Young Werther <span class="add-button"></span> </button> </h2> <div id="accordion-2" class="accordion-collapse"> <div class="accordion-body"> <h3 class="size-lg">Book I</h3> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. </div> </div> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="accordion bordered my-custom-animation">...</div>\n')),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style.css"',title:'"style.css"'},".my-custom-animation {\n  --flatify__accordion-animation-show: flatify-blow-in 0.5s 0.2s;\n  --flatify__accordion-animation-hide: flatify-blow-out 0.5s;\n}\n")),(0,n.kt)("div",{className:"admonition admonition-danger alert alert--danger"},(0,n.kt)("div",{parentName:"div",className:"admonition-heading"},(0,n.kt)("h5",{parentName:"div"},(0,n.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,n.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,n.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"}))),"Do not use ",(0,n.kt)("inlineCode",{parentName:"h5"},"none")," for animations!")),(0,n.kt)("div",{parentName:"div",className:"admonition-content"},(0,n.kt)("p",{parentName:"div"},"Never use ",(0,n.kt)("inlineCode",{parentName:"p"},"none")," for these kinds of animations, because FlatifyCSS JavaScript listens to ",(0,n.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event"},"animationend event"),", so if you set ",(0,n.kt)("inlineCode",{parentName:"p"},"none")," there won't be an animation, it means ",(0,n.kt)("inlineCode",{parentName:"p"},"animationend")," is not going to be triggered. If you want to disable an animation just set ",(0,n.kt)("inlineCode",{parentName:"p"},"animation-duration")," to ",(0,n.kt)("inlineCode",{parentName:"p"},"0s"),".",(0,n.kt)("br",{parentName:"p"}),"\n","The example could be:"),(0,n.kt)("pre",{parentName:"div"},(0,n.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style.css"',title:'"style.css"'},".no-animation-accordion {\n  --flatify__accordion-animation-show: flatify-fade-in 0s;\n  --flatify__accordion-animation-hide: flatify-fade-out 0s;\n}\n")))),(0,n.kt)("h2",{id:"customization"},"Customization"),(0,n.kt)("p",null,"More than customizing animations there are CSS variables to change the base colors of accordions:"),(0,n.kt)("p",null,(0,n.kt)("inlineCode",{parentName:"p"},"--flatify__accordion-txt-color"),(0,n.kt)("br",{parentName:"p"}),"\n",(0,n.kt)("inlineCode",{parentName:"p"},"--flatify__accordion-bg-color"),(0,n.kt)("br",{parentName:"p"}),"\n",(0,n.kt)("inlineCode",{parentName:"p"},"--flatify__accordion-border-color")),(0,n.kt)(s.Z,{height:"250px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Accordion</title> <style> .accordion{ max-width: 820px; margin: 1em auto 0; } .custom-accordion{ --flatify__accordion-txt-color: #F5F7FA; --flatify__accordion-bg-color: #AA8E69; --flatify__accordion-border-color: #F6BB42; } </style> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body class="flex-column-center"> <div class="accordion bordered custom-accordion"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-1"> Lorem ipsum dolor sit amet <span class="add-button"></span> </button> </h2> <div id="accordion-1" class="accordion-collapse"> <div class="accordion-body"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias architecto quae tenetur voluptatum ipsa, esse doloremque numquam accusantium pariatur facere sunt earum aut iure deserunt id illum ipsam repudiandae non? </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2"> Far far away <span class="add-button"></span> </button> </h2> <div id="accordion-2" class="accordion-collapse"> <div class="accordion-body"> Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2"> The Sorrows of Young Werther <span class="add-button"></span> </button> </h2> <div id="accordion-2" class="accordion-collapse"> <div class="accordion-body"> <h3 class="size-lg">Book I</h3> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. </div> </div> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="accordion bordered custom-accordion">...</div>\n')),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style.css"',title:'"style.css"'},".custom-accordion {\n  --flatify__accordion-txt-color: #f5f7fa;\n  --flatify__accordion-bg-color: #aa8e69;\n  --flatify__accordion-border-color: #f6bb42;\n}\n")))}u.isMDXComponent=!0}}]);