Задать вопрос
@Lakalut22
html

Как реализовать закрытие спойлера?

Реализовал спойлер который открывается, и когда открывается следующий первый закрывается, но после этого в конце закрыть спойлер нельзя, подскажите что можно сделать)

вот код
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
	<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">

  <title>Спойлер</title>
  <style>
  
 
  
   .spoiler input, .spoiler div  { 
    display: none; /* Скрываем содержимое */
   }
   .spoiler label::before {
    content: '+' ; /* Текст перед заголовком */
    margin-right: 5px; /* Расстояние до текста */
	font-size: 25px
   }
   /* Открытый спойлер */
    .spoiler--active div {display:block;padding:10px;}
    .spoiler--active label:before {content:'×';}
   }
	hr {
    border: none; /* Убираем границу для браузера Firefox */
    color: black; /* Цвет линии для остальных браузеров */
    background-color: black; /* Цвет линии для браузера Firefox и Opera */
    height: 2px; /* Толщина линии */
   }
  </style>


 
 </head> 
 <body>
  <div class="spoiler">
   <input type="checkbox" id="spoiler1">
   <label for="spoiler1"><font size="4"  face='Open Sans'> Чем SUPERNOVA лучше других онлайн школ?</font> </label>
   <div><font size="4"  face="Open Sans">Выпадающий ответ</font></div>
    <hr> 
</div>
   
 <div class="spoiler">
   
   <input type="checkbox" id="spoiler2">
   <label for="spoiler2"><font size="4"  face='Open Sans'> Как мы подбираем педагогов?</font> </label>
   	<div><font size="4"  face="Open Sans">Выпадающий ответ</font></div>
	<hr>
 </div>
 <div class="spoiler">
   <input type="checkbox" id="spoiler3">
   <label for="spoiler3"><font size="4"  face='Open Sans'> Какие учебные пособия используются на занятиях?</font> </label>
   <div><font size="4"  face="Open Sans">Выпадающий ответ</font></div>
	<hr>
 </div>
 <div class="spoiler">
   <input type="checkbox" id="spoiler4">
   <label for="spoiler4"><font size="4"  face='Open Sans'> Что такое конструктор MY-Ed? И как это работает?</font> </label>
   <div><font size="4"  face="Open Sans">Выпадающий ответ</font></div>
	<hr>
 </div>
<div class="spoiler">
   <input type="checkbox" id="spoiler5">
   <label for="spoiler5"><font size="4"  face='Open Sans'> Как я могу заключить договор на обучение?</font> </label>
   <div><font size="4"  face="Open Sans">Выпадающий ответ</font></div>
	<hr>
 </div>
<div class="spoiler">
   <input type="checkbox" id="spoiler6">
   <label for="spoiler6"><font size="4"  face='Open Sans'> Могу ли я оплатить обучение ребенка материнским капиталом?</font> </label>
   <div><font size="4"  face="Open Sans">Выпадающий ответ</font></div>
	<hr>
 </div>
<div class="spoiler">
   <input type="checkbox" id="spoiler7">
   <label for="spoiler7"><font size="4"  face='Open Sans'> Предоставляете ли вы документы для оформления налогового вычета?</font> </label>
   <div><font size="4"  face="Open Sans">Выпадающий ответ</font></div>
	<hr>
 </div>
 <script
  src="https://code.jquery.com/jquery-3.4.1.min.js" 
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 
  crossorigin="anonymous">
</script>
<script type="text/javascript">
    $(".spoiler").click(function(){
    if ($(this).hasClass("spoiler--active") === false){
    	$(".spoiler").removeClass("spoiler--active");
    	 $(this).addClass("spoiler--active");
  }});
  
</script>

 </body> 
</html>
  • Вопрос задан
  • 66 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
f3d0t
@f3d0t
Добрый день.
Для начала несколько нюансов:
1. Вам нужно прекратить использовать тег font, он очень устаревший, и все источники сейчас не рекомендуют его использовать (MDN)
2. Непонятно, зачем в данном коде добавлен, но не реализован функционал открытия данных спойлеров на чекбоксах. Все равно вы потом делаете все через JS. Кстати, именно из-за этого пришлось добавить event.preventDefault в обработчик события, иначе по клику на label ничего не происходило.

А вот и рабочий js - код:
$(".spoiler").click(function (e) {
	e.preventDefault();
	if ($(this).hasClass("spoiler--active") === false) {
		$(".spoiler").removeClass("spoiler--active");
		$(this).addClass("spoiler--active");
	} else {
		$(this).removeClass("spoiler--active");
	}
});


=))
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Выложить 75 курсов на геткурс и настроить базовые функции
26 нояб. 2024, в 02:18
15000 руб./за проект
Редизайн и доработка интернет магазина на wordPress
25 нояб. 2024, в 23:42
50000 руб./за проект
Разработка мобильного приложения с дополненной реальностью (AR)
25 нояб. 2024, в 23:32
200000 руб./за проект
Ещё заказы