How to create Beautiful Accordion Section on blogger

Copy

Hi frients welcome to our pexario blog. it this tutorial artcle we are guide to how to add beautiful accordtion section on blogger website. Many more people of bloggers not knows about this accordtion section. So, follow the below section and create the beautiful accordtion section blogger.

What is the Accordion section?

The accordion section helps to show some information about animating effects. that means your text shows the user when clicking the accordion section that shows some hidden things with animated effects on your blogger website. for example visit, this page Click Here

Pros and Cons of Accordion section

now the advantages and disadvantages of the accordion section

Pros

Gives the beautiful look
Gives a good user experience
Free to Use

Cons

No disadvantages

How to add an accordion section on blogger

Go to the blogger dashboard and open the theme section

First Backup your theme and Click Edit HTML Option and find </style> and paste above the </style> tag on below CSS codes

Now save your theme.


/* Accordion by Pixabin */
.arn{position:relative;list-style:none;margin:30px 0;padding:0;font-size:14px;line-height:1.7em;font-family:inherit}
.arn .ac{width:100%;padding:20px 0 20px 15px;margin:10px 0;background:#f0f0ff;border-radius:10px;border-left:4px solid #8a8aff;box-shadow:0 5px 10px rgba(51,51,51,.1)}
.arn .ac:nth-child(4n + 1){background:#f0f0ff;border-left-color:#8a8aff}
.arn .ac:nth-child(4n + 2){background:#fff0f3;border-left-color:#ff8aa1}
.arn .ac:nth-child(4n + 3){background:#f0faff;border-left-color:#8ad8ff}
.arn .ac:nth-child(4n + 4){background:#fff7f0;border-left-color:#ffc08a}
.arn .cont{margin:0;padding-left:27px;padding-right:27px;position:relative;overflow:hidden;max-height:0;transition:all .3s ease;color:#08102b}
.arn .cont ul, .arn .cont ol{padding-left:13px}
.arn .cont li{padding:0}
.arn .cont a{text-decoration:none;color:#08102b}
.arn .cont a:hover{text-decoration:underline}
.arn p:first-child{margin-top:0}
.arn 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}
.darkMode .arn .ac{background:#252526;border-left-color:#4c4c4e}
.darkMode .arn .cont, .darkMode .arn .cont a, .darkMode .acTtl, .darkMode .acMn:checked ~ .acTtl{color:#fefefe}
.darkMode .acTtl .acIcn:before, .darkMode .acTtl .acIcn:after, .darkMode .acMn:checked ~ .acTtl .acIcn:before, .darkMode .acMn:checked ~ .acTtl .acIcn:after{background:#fefefe}

Now Copy the below HTML codes. next, paste what you wanted a place on your Website.


<!--[ Accordion by pixabin ]-->
<div class='arn'>
  <!--[ 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>

All things are Finished Thank you...

Custom Modification

If you want any color modifications to edit the CSS source codes
Add Heading on the  <span>Accordion_Title_4</span> Highlighted text.
Add Content below on the <div class='cont'> Section.

Video Guidelines

Final Words

Thank you for Reading this Article. If you like this article and want more information like this please subscribe to our blogs official youtube channel and google news page.

Pixabin Official