Давайте быстро взглянем на приведенное изображение нашего аккордеона. Всего существует четыре вкладки с разными красивыми цветами фона. На каждой вкладке есть разные вопросы и значки. Как вы видели на второй вкладке, он находится в открытом состоянии, а остальные три - в закрытом.
Если вы нажмете на каждую вкладку, она откроется и закроется, также, если одна из них находится в открытом состоянии, и вы нажали на другую вкладку, ранее открытая вкладка автоматически закроется и откроется вкладка, на которую вы нажали.
Вы можете посмотреть видео демонстрацию, попробовать сверстать самому по видео или скачать архив с готовым кодом. Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.
В архиве находится:
- Исходные файлы HTML
- Исходные файлы CSS
- Исходные файлы jаvascript
- Иконки шрифтов
- Файлы библиотеки и плагинов
Аккордеон - это раздел, содержащий заголовок и описание с функциями открытия и закрытия. По сути, описание аккордеона находится в скрытом состоянии, и мы должны нажать на раздел заголовка, чтобы получить описание. Заголовок каждого аккордеона имеет свое собственное описание. Аккордеон может быть составлен из различного текстового содержимого, например FAQ.
Как вы видели в видео, сначала все аккордеоны были в закрытой форме. Когда я нажал на вкладку, она открылась, а когда я нажал на нее во второй раз, она была закрыта. Когда открылась вкладка accordion, вы увидели некоторое описание этой вкладки или раздела accordion. Когда я оставляю вкладку открытой и нажимаю на другую вкладку, предыдущая вкладка автоматически закрывается.
Для создания дизайна пользовательского интерфейса этого аккордеона я использовал HTM и CSS, а для его открытия и закрытия и, очевидно, автоматического закрытия я использовал код jаvascript
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">
<!----======== CSS ======== -->
<link rel="stylesheet" href="style.css">
<!-- =====Fontawesome CDN Link===== -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<title>Accordion in HTML CSS & jаvascript</title>
</head>
<body>
<div class="accordion">
<div class="accordion-content">
<header>
<span class="title">What do you mean by Accordion?</span>
<i class="fa-solid fa-plus"></i>
</header>
<p class="description">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
</p>
</div>
<div class="accordion-content">
<header>
<span class="title">What do you mean by Accordion?</span>
<i class="fa-solid fa-plus"></i>
</header>
<p class="description">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
</p>
</div>
<div class="accordion-content">
<header>
<span class="title">What do you mean by Accordion?</span>
<i class="fa-solid fa-plus"></i>
</header>
<p class="description">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto neque, sed inventore illum ut quis ducimus deleniti temporibus maiores? At nisi sed pariatur cupiditate quidem quod adipisci aut, eos quis minima voluptates non veniam ipsam quasi architecto ducimus error eum id ab, suscipit doloribus, ut accusantium consequuntur voluptate! Unde, hic sed rerum officia totam id libero officiis nihil rem sequi porro labore praesentium repudiandae a blanditiis molestias nisi beatae natus! Ea, ut voluptates, natus harum nesciunt odio hic eveniet reprehenderit veritatis, possimus tempora magni soluta eaque quidem neque maxime nostrum sapiente commodi? Earum ex cumque cupiditate dicta, tempora temporibus quaerat.
</p>
</div>
<div class="accordion-content">
<header>
<span class="title">What do you mean by Accordion?</span>
<i class="fa-solid fa-plus"></i>
</header>
<p class="description">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS КОД:
/* ===== Google Font Import - Poppins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #E3F2FD;
}
.accordion{
max-width: 530px;
width: 100%;
background: #FFF;
margin: 0 15px;
padding: 15px;
border-radius: 8px;
box-shadow: 0 0 4px rgba(0,0,0,0.2);
}
.accordion .accordion-content{
margin: 10px 0;
border-radius: 4px;
background: #FFF7F0;
border: 1px solid #FFD6B3;
overflow: hidden;
}
.accordion-content:nth-child(2){
background-color: #F0FAFF;
border-color: #CCEEFF;
}
.accordion-content:nth-child(3){
background-color: #FFF0F3;
border-color: #FFCCD6;
}
.accordion-content:nth-child(4){
background-color: #F0F0FF;
border-color: #CCCCFF;
}
.accordion-content.open{
padding-bottom: 10px;
}
.accordion-content header{
display: flex;
min-height: 50px;
padding: 0 15px;
cursor: pointer;
align-items: center;
justify-content: space-between;
transition: all 0.2s linear;
}
.accordion-content.open header{
min-height: 35px;
}
.accordion-content header .title{
font-size: 14px;
font-weight: 500;
color: #333;
}
.accordion-content header i{
font-size: 15px;
color: #333;
}
.accordion-content .description{
height: 0;
font-size: 12px;
color: #333;
font-weight: 400;
padding: 0 15px;
transition: all 0.2s linear;
}jаvascript КОД:
const accordionContent = document.querySelectorAll(".accordion-content");
accordionContent.forEach((item, index) => {
let header = item.querySelector("header");
header.addEventListener("click", () =>{
item.classList.toggle("open");
let description = item.querySelector(".description");
if(item.classList.contains("open")){
description.style.height = `${description.scrollHeight}px`; //scrollHeight property returns the height of an element including padding , but excluding borders, scrollbar or margin
item.querySelector("i").classList.replace("fa-plus", "fa-minus");
}else{
description.style.height = "0px";
item.querySelector("i").classList.replace("fa-minus", "fa-plus");
}
removeOpen(index); //calling the funtion and also passing the index number of the clicked header
})
})
function removeOpen(index1){
accordionContent.forEach((item2, index2) => {
if(index1 != index2){
item2.classList.remove("open");
let des = item2.querySelector(".description");
des.style.height = "0px";
item2.querySelector("i").classList.replace("fa-minus", "fa-plus");
}
})
}
