Click to expand Accordion code for blogger

Beautiful Accordion code for blogger 

Hello doston aj hum janenge ki aap ek collapsed Accordion items ko apne blogger website par lagakar kuchh jankari usme de skte hai 

Ye ek heading ke sath ata hai jispe click krne pe iske andar likha hua paragraph khul jata hai ye khaskar qna aur website ki features batane ke liye use hota hai nhi to kya kya query ho skti hai users ko site pe ye batane ke liye website me niche lga Diya jata hai 

Beautiful Accordion code for blogger


Blogger me Accordion kaise lagaye 

Isko apne blogger website me lgana behad asan hai bas apko apni blogger website ke layout section me jana hai aur niche diya hua sara code copy krna hai 

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-item-header">
      Accordion Menu Using HTML
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa excepturi incidunt dicta quasi porro, magnam aliquid, itaque rerum quos repellendus sapiente nemo culpa molestias officiis?
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-header">
      Accordion Using Pure CSS
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat repellat maiores veritatis et, dicta necessitatibus quas illo commodi libero!<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae sequi a fugit totam tempore,  aspernatur.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-header">
      Accordion Menu using Javascript
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus alias dolorum itaque incidunt amet animi explicabo facilis, voluptates, maxime repudiandae minus at, voluptatibus optio facere in obcaecati exercitationem, ab quod.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-header">
      Accordion Bar With Jquery
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam error alias, incidunt dolor aperiam soluta aspernatur tenetur eaque, iusto consequuntur sit nam labore id suscipit. Soluta quos, molestias cum ab laborum odit quaerat quibusdam.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-header">
      Accordion Bar using Bootstrap 5
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        CORS, aka Cross-Origin Resource Sharing, is a mechanism that enables many resources (e.g. images, stylesheets, scripts, fonts) on a web page to be requested from another domain outside the domain from which the resource originated.
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
const accordionItemHeaders = document.querySelectorAll(".accordion-item-header");

accordionItemHeaders.forEach(accordionItemHeader => {
  accordionItemHeader.addEventListener("click", event => {



    accordionItemHeader.classList.toggle("active");
    const accordionItemBody = accordionItemHeader.nextElementSibling;
    if(accordionItemHeader.classList.contains("active")) {
      accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
    }
    else {
      accordionItemBody.style.maxHeight = 0;
    }

  });
});
</script>
<style>
.accordion {
  width: 90%;
  max-width: 1000px;
  margin: 2rem auto;
}
.accordion-item {
  background-color: #fff;
  color: #111;
  margin: 1rem 0;
  border-radius: 0.3rem;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
  padding: 0.5rem 3rem 0.5rem 1rem;
  min-height: 3.5rem;
  line-height: 1.25rem;
  font-weight: bold;
  display: flex;
  font-size: 17px;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.accordion-item-header::after {
  content: "\002B";
  font-size: 2rem;
  position: absolute;
  right: 1rem;
}
.accordion-item-header.active::after {
  content: "\2212";
}
.accordion-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
  padding: 1rem;
  line-height: 1.5rem;
  font-family: sans-serif;
  border-top: 1px solid;
  font-size: 16px;
  border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}

@media(max-width:767px) {
  html {
    font-size: 14px;
  }
}
  </style>

Fir layout me footer ke upper ya sidebar me upar aap jha bhi dikhana chahe vha pe ek html javascript ka gadget add kr lijiye fir in sabhi code ko vha dal kar paste kr dijiye 

Apka Accordion ready ho Gaya ✅


Isko customize kaise kren

Bas apko heading aur paragraph chenge krna hai codes se humne space de rkha hai aur hint bhi keval text ko chenge karke aap ise apna bna skte hai 


Conclusion 

Ye Accordion  html css js se bna hai jo apko apne website me faq and questions answers dalne me.madad karta hai jisse aap kuchh jankari apne website visitors ko de skte hai. 



Next Post Previous Post
No Comment
Add Comment
comment url

Paid Templates

Blogger themes

Movie theme

codes for blogger

Grafix Material