Accordion with HTML and CSS for Blogger | LayZee UI version

Hello all, on this occasion I will share how to make an accordion using only html and css.

maybe some of you are already familiar with the accordion, this accordion is usually found on buying and selling sites or services such as online stores or landing pages.

This accordion is used for the purposes of FAQs or frequently asked questions by prospective clients or buyers.

or it can be used to display the terms and conditions of service for products or services on your site or whatever it is as needed.

for the demo, please click the button below, ok for those of you who want to try it, let's see how.

DEMO

Making Accordion With Html And Css

please go to blogger > themes > edit html copy the css below and place it above the code ]]></b:skin> if it is done don't forget to click save.

/* accordion by Kaily */
.hidden{display:none}
.kaily-acrdn-str{position:relative;margin:30px 0 0;padding:0; font-size:14px;line-height:1.7em} 
.kaily-acrdn-str .kaily-acrdn-ktn{width:100%;padding:18px 0;background-color:#f0f0f0;margin-bottom:5px;border-radius:5px;border:1px solid #f0f0f0;box-shadow:0 1px 0 rgb(0 0 0 / 20%),inset 0 0 0 2px #efefef}
.kaily-acrdn-str p.acc{display:none;margin:0;padding-left:32px;position:relative;overflow:hidden;max-height:0;-webkit-transition:all .2s ease;transition:all .2s ease; opacity:.8} 
.kaily-acrdn-ttl{display:flex;align-items:center;font-weight:900; color:#262d3d;padding:0 5px}
.kaily-acrdn-ttl span{display:flex;width:100%}
.kaily-acrdn-ttl span:before{content:'\203A';flex:0 0 25px;display:flex;align-items:center;justify-content:flex-start;padding:0 5px;font-weight:400;font-size:25px;color:inherit;margin-top:-5px}
.kaily-acrdn-inp:checked ~ .kaily-acrdn-ttl span:before{transform:rotate(90deg);margin-top:5px} .kaily-acrdn-inp:checked ~ .kaily-acrdn-ttl span{color:#f89000} 
.kaily-acrdn-inp:checked ~  p.acc{max-height:100vh;margin:0 10px;display:block}

/* css darkmode adjust the class if different or delete this section */
.darkMode .kaily-acrdn-str .kaily-acrdn-ktn{border:1px solid #4c4f4d;border-bottom-color:#161717;box-shadow:0 1px 0 #161717,inset 0 0 0 2px #4c4f4d;background-color:#4c4f4d}.darkMode .kaily-acrdn-ttl{color:#b0b3b8}

How to use

Please copy the code below and place it where you want the accordion to appear, either in a post or a static page.

This widget uses radio buttons, so it can only open 1 row, if the second row is opened, the first row will be automatically closed. if you want to be able to open all lines please change type='radio' to type='checkbox'>

here also the first line automatically opens, if you guys want it closed then remove the checked which I marked in the first line

<div class='kaily-acrdn-str'>  
<!--[ Accordion 1 ]-->
<div class='kaily-acrdn-ktn'>
<input class='kaily-acrdn-inp hidden' id='acc1' name='accordion' type='radio' checked/>
<label class='kaily-acrdn-ttl' for='acc1'>
<span>Accordion 1</span>
</label>
<p class='acc'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.</p>
</div>
<!--[ Accordion 1 end]-->

<!--[ Accordion 2 ]--> 
<div class='kaily-acrdn-ktn'>
<input class='kaily-acrdn-inp hidden' id='acc2' name='accordion' type='radio'/>
<label class='kaily-acrdn-ttl' for='acc2'>
<span>Accordion 2</span>
</label>
<p class='acc'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.</p>
</div>
<!--[ Accordion 2 end ]-->
  
<!--[ Accordion 3 ]-->
<div class='kaily-acrdn-ktn'>
<input class='kaily-acrdn-inp hidden' id='acc3' name='accordion' type='radio'/>
<label class='kaily-acrdn-ttl' for='acc3'>
<span>Accordion 3</span>
</label>
<p class='acc'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.</p>
</div>
<!--[ Accordion 3  end]-->
  
<!--[ Next accordion here]-->

</div>

if you want to add a new line you have to pay attention to the code id='acc3' and for='acc3' code id and for must have the same value and the value cannot be the same as the existing one.

so if you want to add a 4th line then the writing will look like below, pay attention to what I marked, you just change acc3 to acc4 do the same thing and so on if you want to add a new line

<!--[ Accordion 4 ]-->
<div class='kaily-acrdn-ktn'>
<input class='kaily-acrdn-inp hidden' id='acc4' name='accordion' type='radio'/>
<label class='kaily-acrdn-ttl' for='acc4'>
<span>Accordion 4</span>
</label>
<p class='acc'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.</p>
</div>
<!--[ Accordion 4  end]-->