Nabídka akordeonu je taková, která obsahuje svislý seznam záhlaví, které při výběru nebo otevření skryjí nebo odhalí další obsah týkající se záhlaví.
Ahoj lidi a vítejte v mé sérii projektů JavaScript. V této sérii budu stavět několik JavaScriptových projektů, od jednoduchých jednoduchých miniprojektů až po ty trochu složité.
Než začneme, chci, abyste věděli, že všechny kódy ke každému projektu najdete na mém účtu GitHub v konkrétním repozitáři, který se bude neustále aktualizovat, jak budu zveřejňovat další poznámky k různým projektům. Také jsem nasadil živý odkaz, kde si můžete prohlédnout hotové projekty a pracovat s nimi.
Předpoklady
Předpokládám, že jste již obeznámeni s používáním Html, CSS a JavaScriptu a také máte základní znalosti o tom, jak funguje manipulace DOM v JavaScriptu.
Nyní začněme s naším prvním projektem; 3 jednoduché způsoby, jak postavit akordeon .
Za prvé, co je akordeonové menu?
Nabídka akordeonu je taková, která obsahuje svislý seznam záhlaví, které při výběru nebo otevření skryjí nebo odhalí další obsah týkající se záhlaví. Často je lze nalézt na stránkách FAQ, kde mohou uživatelé snadno procházet seznam otázek, aniž by se nechali rozptylovat odpověďmi, což jim umožňuje kliknout a zobrazit odpovědi na otázky, které je zajímají.
Nyní pojďme postavit naše harmoniky.
Jak postavit akordeon
Jak název této poznámky napovídá, ukážu vám 3 jednoduché a různé způsoby, jak postavit akordeon.
Příklad harmoniky 1
Tento první příklad je nejjednodušší a nejjednodušší na sestavení a nezahrnuje vás psaní kódu JavaScript. Stačí použít dvě html značky nazvané souhrn a podrobnosti.
<details class="accordion1-card">
<summary class="accordion1-card__header">Header</summary>
<p class="accordion1-card__body">
Lorem ipsum, dolor sit amet consectetur adipiscing elit. Et neque, velit quasi quos quia nulla
omnis! Similique dolorum, veniam facilis aliquam est fuga aperiam voluptatibus, sapiente
atque vitae quia accusamus.
</p>
</details>
Souhrnný tag obsahuje hlavičku, která vám dává souhrn toho, o čem akordeon je. Značka podrobností na druhé straně obsahuje souhrnnou značku a tělo nebo další obsah akordeonu, který lze umístit do značky p, jak můžete vidět z fragmentu kódu výše. Když tedy kliknete na záhlaví (tj. souhrn), rozbalovací nabídku podrobností zobrazí další obsah.
Příklad akordeonu 2
V tomto druhém příkladu je zahrnuto několik řádků JavaScriptu. Zde byste naslouchali události kliknutí na záhlaví, takže když uživatel klikne na záhlaví, spustí se funkce, která přepne zobrazení na těle nebo obsahu.
Pojďme napsat náš html,
<div class="accordion2-card">
<h3 class="accordion2-card__header">
Header
<span class="icons material-icons-outlined">
add_circle_outline
</span>
</h3>
<p class="accordion2-card__body">
Lorem ipsum, dolor sit amet consectetur adipiscing elit. Et
neque, velit quasi quos quia nulla omnis! Similique dolorum,
veniam facilis aliquam est fuga aperiam voluptatibus, sapiente
atque vitae quia accusamus.
</p>
</div>
Zde máme prvek div, který obsahuje značku h3 pro záhlaví a značku p pro tělo. Uvnitř záhlaví máme také ikonu, která se otáčí pod úhlem 45 stupňů a její barva se mění na červenou, když je harmonika otevřená, a styly se vrací zpět, když je harmonika zavřená.
Přidejme CSS, abychom to trochu zkrášlili,
/* accordion card */
.accordion2-card {
width: 280px;
border: double goldenrod;
background-color: white;
}
/* accordion header */
.accordion2-card__header {
color: #202020;
position: relative;
padding: 10px;
margin-bottom: 0;
}
/* icons */
.icons {
position: absolute;
right: 10px;
color: goldenrod;
transform: rotate(0deg);
transition: transform 300ms, color 300ms;
}
/* accordion body */
.accordion2-card__body {
border-top: solid 1px goldenrod;
padding: 10px;
color: #3d3b3b;
display: none;
}
/* javascript css classes to be added and removed */
.toggleIcon {
transform: rotate(45deg);
color: hsl(0, 70%, 50%);
}
.active {
display: block;
}
Čas na JavaScript.
//* Js code for accordion 2 example
// variables
const accordion2BtnToggle = document.querySelectorAll(
".accordion2-card__header"
);
Nejprve se všechny hlavičky vyberou pomocí querySelectorAll a uloží se jako pole s názvem accordion2BtnToggle.
// adding event listener to the accordion2 toggle button
for (i of accordion2BtnToggle) {
i.addEventListener("click", accordion2ToggleFunction);
}
Dále je ke všem hlavičkám přidán posluchač událostí, takže když uživatel klikne na kteroukoli hlavičku, spustí se funkce nazvaná accordion2ToggleFunction. Nyní tuto funkci vytvoříme.
// function to open an accordion
function accordion2ToggleFunction() {
this.nextElementSibling.classList.toggle("active");
this.children[0].classList.toggle("toggleIcon");
}
Tato funkce dělá to, že když uživatel klikne na konkrétní záhlaví, tělo, které je jeho dalším sourozencem prvku (protože oba jsou uloženy ve stejném prvku div), bude mít k němu připojenou aktivní třídu, která pak vytvoří style přejít ze zobrazení žádné na zobrazení bloku.
Děti[0] na druhé straně vyberou ikonu (což je první potomek značky h3, tj. záhlaví) a přidá k ní třídu toggleIcon, která po kliknutí změní úhel stupně a barvu ikony.
Nyní přejdeme k našemu třetímu příkladu.
Příklad akordeonu 3
Tento třetí příklad je stejný jako náš druhý příklad, jediný rozdíl je v tom, že když uživatel klikne na hlavičku konkrétní harmoniky zde, pokud je aktuálně otevřené tělo jiné hlavičky, automaticky se zavře před zobrazením těla záhlaví, na které jste klikli. Kód html a CSS zůstává stejný, ale v našem kódu JavaScript se funkce, která běží, liší.
// function to open an accordion while closing the others
function accordion3ToggleFunction() {
for (i of accordion3BtnToggle) {
i.nextElementSibling.style.display = "none";
i.children[0].classList.remove("toggleIcon");
}
if (this.nextElementSibling.style.display == "none") {
this.nextElementSibling.style.display = "block";
this.children[0].classList.add("toggleIcon");
}
}
Z výše uvedeného kódu, když uživatel klikne na konkrétní záhlaví, smyčka for…of nejprve projde celým tělem, čímž jim poskytne styl zobrazení none, a poté projde všemi ikonami a také ze všech odstraní třídu toggleIcon. .
Příkaz if pak zkontroluje, zda tělo konkrétní hlavičky, na kterou bylo kliknuto, nemá styl zobrazení žádný. Pokud ano, přidá do něj styl bloku zobrazení a přidá k ikonám naši třídu toggleIcon.
Když uživatel poté klikne na další záhlaví, cyklus for...of se znovu spustí, takže celé tělo bude mít zobrazení žádné a odstraní třídu toggleIcon z ikon včetně těch, které jsme právě přidali do předchozího těla a ikony. Příkaz if se poté znovu spustí a přidá třídu active a toggleIcon do těla a ikony nového záhlaví, na které jsme právě klikli.
Nyní, když jste viděli 3 jednoduché způsoby, jak postavit akordeon, doufám, že je použijete ve svém dalším projektu. Jaký projekt JavaScript chcete, abych vytvořil další?
Až příště, lidi, Ahoj!
Spojte se se mnou na
Twitter | LinkedIn | Instagram.
Pokud se vám mé poznámky líbí a chtěli byste mě podpořit, můžete mi koupit kávu na ByMeACoffee nebo GetFidia. Miluju chuť kávy.🥰
Zdroje
- Prohlédněte si kód na GitHubu zde
- Projekt si můžete prohlédnout zde
- Kdy byste na svém webu měli používat akordeony
- JavaScript HTML DOM navigace