logo

Jak vytvořit Bootstrap jako Accordions pomocí HTML | CSS | JavaScript

jak se máte kluci!
Doufám, že se vám všem daří dobře.
Ve většině svých malých projektů se snažím co nejvíce vyhýbat používání knihoven pro CSS/JavaScript, protože mi to nabízí větší kontrolu nad mým kódem. Viděl jsem mnoho vývojářů, kteří používali nástroje/knihovny i pro malé věci, Nejsem proti jejich používání Záleží jen na osobní volbě člověka.
Dnes chci mluvit o způsobu, jak vytvořit akordeony pomocí prostého JavaScriptu. Je to jednodušší, než si myslíte. tak se pojďme ponořit.

  • Nejprve vytvořte složku s názvem akordeony. (Můžete ji pojmenovat, jak chcete, ale rád to zjednoduším).
  • uvnitř této složky akordeonů vytvořte další dvě složky css a js a soubor index.html.
  • Pojďme nyní vytvořit dva další soubory style.css uvnitř složky css a script.js uvnitř složky js. Struktura našich souborů a složek je nastavena.

začněme s index.html 

<!DOCTYPE html>
 <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/style.css" />

  <title>Accordions</title>
</head>
<body>
  <header>
    <h1>Accordions using HTML CSS and JavaScript.
  </header>
    <main>      
    <section class="container">

    </section>
    </main>
</body>
<script src="js/script.js"></script>
</html>

Výše uvedené je jen základní vzor pro náš projekt, propojili jsme naše šablony stylů a soubory javascriptu a přidali fontawesome cdn odkaz pro ikony v html a přidali nadpis.

  • Nyní chci vytvořit 3 sekce uvnitř sekce s kontejnerem třídy a dát jí třídní akordeony.
  • A uvnitř těchto jednotlivých sekcí chci vytvořit další sekci s nadpisem třídy, která bude obsahovat náš prvek div s textem třídy, a další oddíl s ikonou třídy, který bude naším nadpisem akordeonu.
  • A nakonec vytvořte ještě jednu sekci uvnitř sekce s akordeonem třídy a dejte jí třídu definice.

Náš kód bude vypadat nějak takto. 

<section class="accordion active">
        <section class="heading">
          <div class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, earum!
          </div>
          <div class="icon">
            <i class="fa fa-caret-down" aria-hidden="true"></i> 
          </div>
        </section>
        <section class="definition">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita laboriosam, natus atque laudantium iure delectus, sapiente deleniti optio dolorum officiis a vero dicta corrupti assumenda accusamus, fugit et aspernatur sequi dolores recusandae. Expedita, tempora quam dicta dolores voluptatum, quasi temporibus, reiciendis laudantium incidunt exercitationem possimus perspiciatis. Reiciendis beatae dolor ex neque, eum nesciunt sunt nisi deserunt, doloribus tempore ipsa commodi. Ducimus quam, accusamus provident quisquam asperiores dolor illum expedita odit. Quia quas neque deserunt, odit libero ab dolorem iste, error est rem dolorum, voluptates incidunt optio architecto. Consequuntur incidunt facilis optio rem suscipit porro, tenetur, animi maxime aliquam modi ex!
       </section>
</section>

<section class="accordion active">
        <section class="heading">
          <div class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, earum!
          </div>
          <div class="icon">
            <i class="fa fa-caret-down" aria-hidden="true"></i> 
          </div>
        </section>
        <section class="definition">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita laboriosam, natus atque laudantium iure delectus, sapiente deleniti optio dolorum officiis a vero dicta corrupti assumenda accusamus, fugit et aspernatur sequi dolores recusandae. Expedita, tempora quam dicta dolores voluptatum, quasi temporibus, reiciendis laudantium incidunt exercitationem possimus perspiciatis. Reiciendis beatae dolor ex neque, eum nesciunt sunt nisi deserunt, doloribus tempore ipsa commodi. Ducimus quam, accusamus provident quisquam asperiores dolor illum expedita odit. Quia quas neque deserunt, odit libero ab dolorem iste, error est rem dolorum, voluptates incidunt optio architecto. Consequuntur incidunt facilis optio rem suscipit porro, tenetur, animi maxime aliquam modi ex!
       </section>
</section>    

<section class="accordion active">
        <section class="heading">
          <div class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, earum!
          </div>
          <div class="icon">
            <i class="fa fa-caret-down" aria-hidden="true"></i> 
          </div>
        </section>
        <section class="definition">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita laboriosam, natus atque laudantium iure delectus, sapiente deleniti optio dolorum officiis a vero dicta corrupti assumenda accusamus, fugit et aspernatur sequi dolores recusandae. Expedita, tempora quam dicta dolores voluptatum, quasi temporibus, reiciendis laudantium incidunt exercitationem possimus perspiciatis. Reiciendis beatae dolor ex neque, eum nesciunt sunt nisi deserunt, doloribus tempore ipsa commodi. Ducimus quam, accusamus provident quisquam asperiores dolor illum expedita odit. Quia quas neque deserunt, odit libero ab dolorem iste, error est rem dolorum, voluptates incidunt optio architecto. Consequuntur incidunt facilis optio rem suscipit porro, tenetur, animi maxime aliquam modi ex!
       </section>
</section>

Doufám, že už je to jasné. pojďme ke stylingové části.

v našem style.css vložte následující kód. 

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
header h1 {
  background: coral;
  color: #fff;
  text-align: center;
  padding: 10px;
}
body {
  background: #f6f6f6;
}
main {
  width: 90%;
  min-height: calc(100vh - 90px);
  margin: 10px auto;
  background: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
main section.container {
  padding: 15px 25px;
}
h3 {
  margin-top: 10px;
}
section.accordion {
  margin-top: 10px;
}
section.accordion .heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: coral;
  padding: 10px;
  cursor: pointer;
}
section.accordion .heading div.text {
  flex: 10;
  font-weight: 600;
}
section.accordion .heading div.icon {
  flex: 1;
  text-align: center;
}
section.accordion.active .heading,
section.acordion.active .icon {
  color: #fff;
}
section.accordion .heading div.icon i {
  font-size: 1.5em;
  cursor: pointer;
}
section.accordion.active .definition {
  display: block;
  transition: display 0.3s ease-in;
}
section.accordion .definition {
  display: none;
  padding: 10px;
  transition: display 1s ease-in-out;
}

Nyní otevřete index.html ve svém prohlížeči, měl by vypadat jako níže

otevřeme náš skript script.js a začneme psát nějaký kód JavaScript. 


let accIcons = document.querySelectorAll(".accordion .icon i")

accIcons.forEach((accIcon) => {
  addEventListener("click", expand)
})

function expand(e) {  e.target.parentNode.parentNode.parentNode.classList.toggle("active");
}

zkusme porozumět kódu.

  • v prvním řádku uchopíme všechny ikony a umístíme je do proměnných accIcons .
  • ve druhém řádku ke všem ikonám přidáváme událost kliknutí, která po kliknutí spustí funkci s názvem rozbalit
  • tato funkce přepne aktivní třídu na cílovém akordeonu. A tato událost se spustí vždy, když klikneme na ikonu stříšky dolů.

Chci k nim přidat další 2 funkce.

  1. Sbalit vše
  2. rozbalit vše

nechte otevřít náš index.html vytvořte 2 tlačítka a přidejte nějaké styly

v kontejneru pod <h3> napište níže uvedený kód. 

<div class="btns">
   <button class="collapseAll" id="collapseAll"> 
       Collapse All
   </button>
   <button class="expandAll" id="expandAll">
       Expand All
   </button>
</div>

pojďme je stylovat 

div.btns {
  margin-top: 20px;
  text-align: center;
}
button {
  padding: 2px 7px;
  cursor: pointer;
  border-radius: 15px;
  font-size: 0.75em;
  outline: none;
  border: 0.5px solid black;
}
button#collapseAll {
  background: cyan;
}
button#expandAll {
  background: firebrick;
  color: #f3f3f3;
}

naše webová stránka by nyní měla vypadat takto:

Když kliknu na tlačítko Sbalit vše, všechny harmoniky by se měly sbalit.
a když kliknu na tlačítko rozbalit vše, měly by se rozbalit všechny harmoniky.
tak pojďme napsat kód do našeho script.js 

let accordions = document.querySelectorAll(".accordion");
let expandBtn = document.querySelector("#expandAll");
let collapseBtn = document.querySelector("#collapseAll");

expandBtn.addEventListener("click", expandAll);
collapseBtn.addEventListener("click", collapseAll);

function collapseAll() {
  accordions.forEach((accordion) => {
    accordion.classList.remove("active");
  });
}

function expandAll() {
  accordions.forEach((accordion) => {
    accordion.classList.add("active");
  });
}

abychom pochopili, co se tady děje.
všechny akordeony popadneme třídní harmonikou a umístíme je do harmonik
dále uchopíme dvě tlačítka, která jsme právě vytvořili, a umístíme je do sbalitBtn a expandBtn;
Pak přidáme kliknutí i pro každé z těchto tlačítek. který pak bude spouštět různé funkce.

Když klikneme na CollapBtn, spustí se funkce CollapAll, která sbalí všechny akordeony s className akordeon toho dosáhneme metodou classList.remove().

když klikneme na expandBtn spustí se funkce expandAll, která rozbalí všechny akordeony s className akordeon toho dosáhneme metodou classList.add().

Odkaz na codepen je níže, který obsahuje úplný kód. pokud máte nějaké pochybnosti nebo nějaké dotazy, neváhejte je napsat do diskuze níže.
Pokud se vám tento příspěvek líbil, dejte mi like a sledujte mě pro další skvělé věci, jako je tento.

Odkaz:https://codepen.io/shameerchagani/full/vYpZZqL

Na zdraví!!