Join our Telegram and Youtube Channels

How to create Beautiful Accordion Section on blogger

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  <!--[ Accordion Title ]--> <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.

Related Posts

Post a Comment

Table of Contents