How To Create Morden Toggle Content Or Accordion Section On Blogger?

Hello Guys! How are you? I hope you are all good. If you are looking for how to create a Morden Toggle Content Or Accordion Section On Blogger website then this post is just for you.

We only used for that Script HTML and CSS not any JavaScript operation, Are you upset about your website speed? do not worry it doesn't affect your website speed.

Also do not worry about it 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 valuable 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 important time let's check How To Create Morden Toggle Content Or Accordion Section On Blogger.

Before Create This Page let's see a Preview

Demo

How To Create Morden Toggle Content Or Accordion Section On Blogger

Important!
Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon next to 'customize' button.

Step 4: Click Edit HTML, you will 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 Freemium Tech */

.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}

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 default!

Step 6: Save the html changes by clicking on Save icon.

Step 7: Then go to the page/post or place which you want to add Toggle Content.

Step 8: Then if you are doing this in page/post then don't forget to change Compose view to the HTML view. <>

Step 9: Now paste the following HTML code to that place.

<!--[ Accordion by Freemium Tech ]-->

<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.

That's done. 👍 You are Successfuly create Toggle Content Or Accordion Section. Enjoy.

CONCLUSION

In this article, I shared with you How To Create Morden Toggle Content Or Accordion Section On Blogger? I hope you have liked It. Please do share it with your friends and follow our blog for more.

Join our Telegram Channel to get the lastest posts updates daily.

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.