В этой статье я покажу вам, как сделать аккордеонное меню, или вы можете сказать меню часто задаваемых вопросов, используя html, css и javascript.
Возможно, вы видели аккордеонное меню (раздел часто задаваемых вопросов) на веб-сайте, где есть вопрос, который часто задают их пользователи. и когда вы нажмете на этот вопрос, ответ появится. На изображении ниже показано, что при нажатии на второй вопрос появляется ответ или описание.
Ниже приведена демонстрация и полное видеоруководство по меню аккордеона с использованием html, css и javascript.
Аккордеон меню
Итак, я создал два файла с index.html и index.css. Затем связал файл css с html. А также я использовал javascript в этом меню, поэтому я добавил его в html-файл в теге script под закрывающим тегом body.
Ниже приведены шаги для создания аккордеонного меню.
Шаг 1: Создайте базовую HTML-структуру и добавьте вопрос.
Итак, во-первых, я добавил фон (класс-контейнер), который имеет простой фон белого цвета. В центре этого мы собираемся добавить вопросы и ответы. Этот вопрос и ответ заключены в один div (класс коробки). См. приведенный ниже код.
Итак, давайте сначала добавим вопросы.
Для вопроса я добавил тег div с классом label_box, в который добавлен тег H1 и тег span.
- label_box для вопросов.
- Тег H1 предназначен для вопроса заголовка.
- Тег Span предназначен для знака плюс. Когда пользователь нажимает на label_box, знак плюс меняется на знак минус. Также добавлены два тега div для формирования знака плюс (вы также можете использовать изображение).
<!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">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box">
<div class="label_box">
<h1>Title</h1>
<span><div class="line1"></div><div class="line2"></div></span>
</div>
</div>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: 100vh;
position: relative;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
width: 450px;
}
.box{
width: 100%;
background-color: blue;
color: #fff;
margin-bottom: 12px;
}
.box .label_box{
display: flex;
align-items: center;
}
.label_box h1{
font-size: 35px;
width: 90%;
font-weight: bold;
padding: 10px;
cursor: pointer;
}
.label_box span{
position: relative;
}
.label_box span .line1{
width: 3px;
height: 16px;
background-color: #fff;
transition: 0.3s;
}
.label_box span .line2{
width: 3px;
height: 16px;
background-color: #fff;
position: absolute;
top: 0px;
rotate: 90deg;
transition: 0.3s;
}
Выход :
Как вы можете видеть на изображении выше, дизайн вопроса готов. Теперь давайте добавим описание или ответ ниже на вопрос.
Шаг 2: Добавьте ответ под вопросом.
Итак, я добавил тег p с описанием класса. ниже класса label_box, созданного выше.
<p class="description">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit totam quaerat, magnam, expedita repellendus odio necessitatibus soluta ducimus unde perferendis et aliquid ullam inventore dolorum veniam placeat eligendi! Magni, maiores.
</p>
.box .description{
padding: 12px;
font-size: 20px;
background-color: #fcfcfc;
color: #000;
transition: 0.2s;
}
Выход :
Теперь меню готово, Давайте спрячем ответ.
Шаг 3: Сначала скройте ответ или описание.
Итак, чтобы скрыть ответ или описание, я добавил в описание высоту: 0 пикселей, переполнение: скрыто, отступ: 0 пикселей.
.box .description{
padding: 0px;
height: 0px;
overflow: hidden;
font-size: 20px;
background-color: #fcfcfc;
color: #000;
transition: 0.2s;
}
Выход :
Шаг 4: Теперь давайте добавим больше вопросов и ответов.
Чтобы добавить больше вопросов и ответов, я просто скопировал и вставил весь div класса box. Вы можете увидеть приведенный ниже код. добавлено еще три вопроса и ответа.
<div class="box">
<div class="label_box">
<h1>Title</h1>
<span><div class="line1"></div><div class="line2"></div></span>
</div>
<p class="description">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit totam quaerat, magnam, expedita repellendus odio necessitatibus soluta ducimus unde perferendis et aliquid ullam inventore dolorum veniam placeat eligendi! Magni, maiores.
</p>
</div>
<div class="box">
<div class="label_box">
<h1>Title</h1>
<span><div class="line1"></div><div class="line2"></div></span>
</div>
<p class="description">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit totam quaerat, magnam, expedita repellendus odio necessitatibus soluta ducimus unde perferendis et aliquid ullam inventore dolorum veniam placeat eligendi! Magni, maiores.
<br>
<br>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit totam quaerat, magnam, expedita repellendus odio necessitatibus soluta ducimus unde perferendis et aliquid ullam inventore dolorum veniam placeat eligendi! Magni, maiores.
<br>
<br>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit totam quaerat, magnam, expedita repellendus odio necessitatibus soluta ducimus unde perferendis et aliquid ullam inventore dolorum veniam placeat eligendi! Magni, maiores.
</p>
</div>
<div class="box">
<div class="label_box">
<h1>Title</h1>
<span><div class="line1"></div><div class="line2"></div></span>
</div>
<p class="description">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit totam quaerat, magnam, expedita repellendus odio necessitatibus soluta ducimus unde perferendis et aliquid ullam inventore dolorum veniam placeat eligendi! Magni, maiores.
</p>
</div>
Выход :
Как вы можете видеть на изображении выше, я добавил еще три вопроса и ответа. Ответы не видны, потому что мы скрываем их на шаге 3.
Шаг 5: Добавьте JavaScript, чтобы открывать ответы, когда пользователь нажимает на вопросы.
Теперь, чтобы открыть ответ (класс описания) при нажатии на вопрос (класс label_box). Я использовал метод foreach. потому что есть те же классы для каждого вопроса и ответа. Итак, с помощью метода foreach мы можем настроить таргетинг на каждый класс. См. ниже JavaScript.
Итак, что он сделает, так это установит высоту описания: 0px; при загрузке страницы. И когда пользователь нажимает на вопрос (класс label_box), он проверяет, равна ли высота описания 0 или нет.
Если это 0px, то если часть будет работать, то знак плюса превратится в минус, повернув его на 90 градусов, высота описания будет установлена равной высоте прокрутки (потому что некоторые описания длинные, а некоторые короткие). и отступ: 12px (который выше установлен на 0px).
Если высота описания не 0px. то еще часть будет работать. которые превращают знак минус в знак плюса, а высота описания и отступы равны 0px.
let box = document.querySelectorAll(".box");
box.forEach((item , index) => {
let description = item.querySelector(".description");
let label_box = item.querySelector(".label_box");
let line1 = item.querySelector(".line1");
let line2 = item.querySelector(".line2");
description.style.height = "0px";
label_box.onclick = function(){
if (description.style.height == "0px") {
line1.style.rotate = "90deg";
line2.style.rotate = "90deg";
description.style.height = description.scrollHeight + "px";
description.style.padding = "12px";
}else{
line1.style.rotate = "0deg";
line2.style.rotate = "90deg";
description.style.height = "0px";
description.style.padding = "0px";
}
}
});
Выход :
Как вы можете видеть на изображении выше, при нажатии на вопрос отображается описание, а знак плюс меняется на знак минус. Вот так можно составить меню-аккордеон.
Вам также может понравиться:
Окончательный код:
Вы найдете окончательный код здесь.
Вот как вы можете сделать аккордеонное меню, используя html, css и javascript. Если у вас есть какие-либо вопросы или предложения, вы можете написать в разделе комментариев.
Первоначально опубликовано на https://www.maketechstuff.com.
