Discover the Benefits of Canva Pro for Free and Elevate Your Designs | Get it for Free

Modern Toggle Content

We didn't use any JavaScript; we just utilized HTML and CSS. Are you unhappy with the speed of your website? You shouldn't worry; it won't slow down your website.

Don't worry about it either; the Accordion Section contains dark mode CSS as well. All you need to do is modify the dark mode class that we assigned to your theme. You can accomplish this by carefully following this tutorial.

Toggle or Accordion Content

Accordions come in handy when you have to switch between displaying a large amount of content and storing it away.
The data concerning energizing affects is shown with the help of the accordion area. that suggests your text displays to the customer as they tap the accordion section, revealing a few hidden details that have energizing effects for your blogger website.

So let's check out How To Make A Modern Toggle Content Or Accordion Section On Blogger without wasting any more precious time.

You can see the demo here:-

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.

/* According to Trick With Abdullah  */

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

Step 6: Save the html.

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 Trick With Abdullah ]-->

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

Go to Link

Go to Link