Accordion

Not a traditional Accordion It's A Special Accordion With Responsive Design and Supports Dark Mode For Reko LOVERS 😍

Why Reko Studio ?

Because they Love you All 😍

What Is this ?

a Good Accordion

Long Text

A Long Text "Not a traditional Accordion It's A Special Accordion With Responsive Design and Supports Dark Mode For Reko LOVERS 😍 Not a traditional Accordion It's A Special Accordion With Responsive Design and Supports Dark Mode For Reko LOVERS 😍"

Start

Get Started By Making A Folder Includes index.html or Pug , style.css and make sure you Prepared The HTML/Pug file from here Introduction To Use Dark Mode Click Here

Put This in index.html if you use HTML

HTML

<div class="containerofacc">
  <div class="q">
    <div class="intr">
      <h2 class="titleacc">Why Reko Studio ?</h2>
      <div class="plus">+</div>
    </div>
    <p class="accContent">
      Because they Love you All 😍
    </p>
  </div>
  <div class="q">
    <div class="intr">
      <h2 class="titleacc">What Is this ?</h2>
      <div class="plus">+</div>
    </div>
    <p class="accContent">
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Laboriosam dolorum maxime 
      quam quos doloribus commodi tempore quod
      placeat, reprehenderit officiis 
      provident harum delectus sunt labo
      rum aut culpa dolore esse. Omnis.
    </p>
  </div>
  <div class="q">
    <div class="intr">
      <h2 class="titleacc">Short Text</h2>
      <div class="plus">+</div>
    </div>
    <p class="accContent">Reko Studio</p>
  </div>
</div>

Put This in you Pug Files if you use Pug

Pug

.containerofacc
  .q
    .intr
      h2.titleacc Why Reko Studio ?
      .plus +
    p.accContent
      | Because they Love you All 😍
  .q
    .intr
      h2.titleacc What Is this ?
      .plus +
    p.accContent
      | a Good Accordion
  .q
    .intr
      h2.titleacc Long Text
      .plus +
    p.accContent A Long Text "Not a traditional Accordion It's A
     Special Accordion With Responsive Design and Supports Dark Mode 
     For Reko LOVERS 😍 Not a traditional Accordion It's A Special Accordion 
    |With Responsive Design and Supports Dark Mode For Reko LOVERS 😍"

Put This in your style.css

CSS

:root{ /*Put Your normal Colors here */
  --AccordionColor:#039be5;
  --AccordionContentColor:#039ae54d;
  --TextColor:black;
}
.dark{  /*Put Your Dark mode Colors here */
  --AccordionColor:grey;
  --TextColor:white;
  --AccordionContentColor:#a2a9ad4d;
}
.containerofacc{
  color: white;
}
.intr{
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  background-color: var(--AccordionColor);
  padding: 10px 15px;
  border-radius:5px  5px 0 0 !important;
}
.intr h2 {
  font-size: 1.5rem;
}
.plus,.mins{
  font-family: sans-serif !important;
  font-size: 30px;
  cursor: pointer;
  user-select: none;
  font-weight: bold;
}
.accContent p{
  height: 150px;
}
.accContent{
  background-color:var(--AccordionContentColor);
  color: var(--TextColor);
  padding: 15px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 10px;
  transition: 0.2s all;
  opacity:0;
  height:0px;
}
.q{
  margin: 1rem;
}

Put This in your script.js

JavaScript

const containerofacc = document.querySelector(".containerofacc");
containerofacc.addEventListener("click", (eo) => {
switch (eo.target.className) {
  case "plus":
    eo.target.innerText = "__";
    eo.target.className = "mins";
    eo.target.style.transform = "translateY(-11px)";
    let content =
      eo.target.parentElement.parentElement.querySelector(".accContent");
    content.setAttribute(
      "style",
      `opacity:1;height:${content.scrollHeight + 20}px;`
    );
    break;
  case "mins":
    eo.target.innerText = "+";
    eo.target.className = "plus";
    eo.target.style.transform = "unset";
    let content1 =
      eo.target.parentElement.parentElement.querySelector(".accContent");

    content1.setAttribute("style", "opacity:0;height:0px;");
    break;
  }
});