Hay Viewers! If you are looking for how to create a Stylish Toggle Content Or Accordion Section On Blogger website then this post is helpful for you.
First of all, my introduction: I'm Kk admin of this site. I have been involved with Blogging Stylish Customise coding for a long time. I will give you proper advice on my best from long experience so let's start the process..
We only used HTML and CSS code not Javascript operation. Are you scared about your website speed impact by our codes? don't worry it doesn't affect your website speed or style.
I also informed you that this Accordion Section also has dark mode CSS that you just want to change the dark mode class that we gave with your theme dark mode class, you can fluently change it by following this tutorial precisely.
Accordion or Toggle Content:
Accordions are very useful when you need to flip among stowing away and showing enormous measure of content.
The accordion area assists with showing some data about energizing impacts. that implies your text shows the client while tapping the accordion area that shows a few secret things with energized consequences for your blogger site.
So without wasting our important time let's check How To Create Stylish Toggle Content Or Accordion Section On Blogger.
You can see the Toggle Demo Here:-
How To Create Stylish Toggle Content Or Accordion Section On Blogger HTML CODE
Important!Before we start adding codes in XML view, I will recommend you to take a Backup of your current theme. By chance if you get any problem on your site then, you can restore it later.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Theme option.
Step 3: Click the arrow down icon next to 'customize' button.
Step 4: Click Edit HTML, then you'll be redirected to editing page.
Step 5: Now search the code ]]></b:skin> or /*]]>*/</style> and paste the following CSS Codes just above to it.
/* Accordion by ACT */
.acdn{position:relative;list-style:none;margin:30px 0;padding:0;font-size:14px;line-height:1.7em;font-family:inherit}
.acdn .ac{width:100%;padding:20px 0 20px 15px;margin:10px 0;background:#f0f0ff;border-radius:5px;}
.acdn .ac:nth-child(4n + 1){background:#f0f0ff;border:1px solid #8a8aff}
.acdn .ac:nth-child(4n + 2){background:#fff0f3;border:1px solid #ff8aa1}
.acdn .ac:nth-child(4n + 3){background:#f0faff;border:1px solid #8ad8ff}
.acdn .ac:nth-child(4n + 4){background:#fff7f0;border:1px solid #ffc08a}
.acdn .cont{margin:0;padding-left:27px;padding-right:27px;position:relative;overflow:hidden;max-height:0;transition:all .3s ease;color:#08102b}
.acdn .cont ul, .acdn .cont ol{padding-left:13px}
.acdn .cont li{padding:0}
.acdn .cont a{text-decoration:none;color:#08102b}
.acdn .cont a:hover{text-decoration:underline}
.acdn p:first-child{margin-top:0}
.acdn p:last-child{margin-bottom:0}
.acTtl{display:flex;align-items:center;font-weight:700;color:#08102b}
.acTtl span{display:flex;flex-grow:1}
.acTtl span:before{content:'';padding-left:15px}
.acIcn{flex-shrink:0;display:flex;align-items:center;width:12px;height:12px;position:relative}
.acIcn:before, .acIcn:after{content:'';display:block;width:100%;height:2px;border-radius:2px;background:#08102b}
.acIcn:after{position:absolute;transform:rotate(90deg)}
.acMn{display:none}
.acMn:checked ~ .acTtl .acIcn:after{visibility:hidden;opacity:0}.acMn:checked ~ .cont{max-height:100vh;padding-top:15px;padding-bottom:8px}
.drK .acdn .ac{background:#252526;border:1px solid #4c4c4e}
.drK .acdn .cont, .drK .acdn .cont a, .drK .acTtl, .drK .acMn:checked ~ .acTtl{color:#fefefe}
.drK .acTtl .acIcn:before, .drK .acTtl .acIcn:after, .drK .acMn:checked ~ .acTtl .acIcn:before, .drK .acMn:checked ~ .acTtl .acIcn:after{background:#fefefe}
Oh! Don't forget to change .drK with your website theme dark mode class, if your theme did not have a dark mode feature then keep it same!
Step 6: Save the html changes by clicking on this icon
Step 7: Then go to the page or post where you want to add to this Toggle Content
Step 8: Then if you are doing this in page or post then don't forget to change Compose view to the HTML view.
Step 9: Now paste the following HTML code to that particular place
<!--[ Accordion by ACT ]-->
<div class='acdn'>
<!--[ Accordion 1 ]-->
<div class='ac'>
<div class='acCont'>
<input class='acMn' id='offaccor1' name='accordion-1' type='checkbox'/>
<label class='acTtl' for='offaccor1'>
<i class='acIcn'></i>
<!--[ Accordion Title ]-->
<span>Accordion_Title_1</span>
</label>
<!--[ Accordion Content ]-->
<div class='cont'>
<p>...</p>
</div>
</div>
</div>
<!--[ Accordion 2 ]-->
<div class='ac'>
<div class='acCont'>
<input class='acMn' id='offaccor2' name='accordion-2' type='checkbox'/>
<label class='acTtl' for='offaccor2'>
<i class='acIcn'></i>
<!--[ Accordion Title ]-->
<span>Accordion_Title_2</span>
</label>
<!--[ Accordion Content ]-->
<div class='cont'>
<p>...</p>
</div>
</div>
</div>
<!--[ Accordion 3 ]-->
<div class='ac'>
<div class='acCont'>
<input class='acMn' id='offaccor3' name='accordion-3' type='checkbox'/>
<label class='acTtl' for='offaccor3'>
<i class='acIcn'></i>
<!--[ Accordion Title ]-->
<span>Accordion_Title_3</span>
</label>
<!--[ Accordion Content ]-->
<div class='cont'>
<p>...</p>
</div>
</div>
</div>
<!--[ Accordion 4 ]-->
<div class='ac'>
<div class='acCont'>
<input class='acMn' id='offaccor4' name='accordion-4' type='checkbox'/>
<label class='acTtl' for='offaccor4'>
<i class='acIcn'></i>
<!--[ Accordion Title ]-->
<span>Accordion_Title_4</span>
</label>
<!--[ Accordion Content ]-->
<div class='cont'>
<p>...</p>
</div>
</div>
</div>
</div>
Characterizes extra satisfied that clients can open and close on request in gatherings, generally utilized for a rundown of inquiries or FAQs (Much of the time Clarified some pressing issues).
You can change html texts as you want in the code box!
Step 10: Then Save or Publish Your Post or Page.
This Toggle Section Also Work On Some Theme Layout HTML Section.
Terms of Use
To appreciate our this workshop, consider keeping the credits in REGON.
We do not allow to rewrite or Copy this post in any manners. Do not copy this post or any part from this composition without authorization, it's strictly prohibited. However, Legal conduct will be taken, If you do so.
Conclusion
In this article I have made a tutorial on How To Create Stylish Toggle Content Or Accordion Section On Blogger. I Hope you have liked this article and please do share with your friends and follow up blog for more.
Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © ACT All Rights Reserved
© Copyright:
www.acttime.blogspot.com
Rate This Article
Thanks for reading: How to Create Stylish Toggle content on blogger , Stay tune to get latest Blogging Tips.