Accordion Widget with html and css
Hello all on this occasion I will share how to make an accordion only with 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 FAQ purposes 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.
There are actually a lot of similar tutorials circulating on the internet, but if you haven't found a style that fits your site, then you can try what I'm going to share this time.
for the demo, please click the button below, ok for those of you who want to try it, let's see how.
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 Blogger Store */
.hidden{display:none}
.bs-acrdn-str{position:relative;margin:30px 0 0;padding:0; font-size:14px;line-height:1.7em}
.bs-acrdn-str .bs-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}
.bs-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}
.bs-acrdn-ttl{display:flex;align-items:center;font-weight:900; color:#262d3d;padding:0 5px}
.bs-acrdn-ttl span{display:flex;width:100%}
.bs-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}
.bs-acrdn-inp:checked ~ .bs-acrdn-ttl span:before{transform:rotate(90deg);margin-top:5px} .bs-acrdn-inp:checked ~ .bs-acrdn-ttl span{color:#f89000}
.bs-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 .bs-acrdn-str .bs-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 .bs-acrdn-ttl{color:#b0b3b8}How to use
please copy the code below and place it where you want the accordion to appear in posts or static pages.
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 want it to be closed then remove the checked which I marked in the first line
<div class='bs-acrdn-str'>
<!--[ Accordion 1 ]-->
<div class='bs-acrdn-ktn'>
<input class='bs-acrdn-inp hidden' id='acc1' name='accordion' type='radio' checked/>
<label class='bs-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 and]-->
<!--[ Accordion 2 ]-->
<div class='bs-acrdn-ktn'>
<input class='bs-acrdn-inp hidden' id='acc2' name='accordion' type='radio'/>
<label class='bs-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 and ]-->
<!--[ Accordion 3 ]-->
<div class='bs-acrdn-ktn'>
<input class='bs-acrdn-inp hidden' id='acc3' name='accordion' type='radio'/>
<label class='bs-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 and]-->
<!--[ Accordion selanjutnya di sini]-->
</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 the 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='bs-acrdn-ktn'>
<input class='bs-acrdn-inp hidden' id='acc4' name='accordion' type='radio'/>
<label class='bs-acrdn-ttl' for='acc4'>
<span>Accordion 4</span>
</label>
<p class='acc'>Lorem ipsum dolor sit amet, elite adipiscing consectetur. Proin vestibulum dignissim silent, et efficitur felis commodo et. Mauris Vel Silent 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 and]-->ok so that 's how to make an accordion with html and css that I can share this time, hopefully it's useful and thanks for visiting.
