Как заставить работать тумблер для выпадающего списка FAQ - PullRequest
Новая
       10

Как заставить работать тумблер для выпадающего списка FAQ

0 голосов
/ 09 июля 2019

Я пытаюсь свернуть и развернуть этот FAQ по клику, но ничего не происходит.

Я попытался немного поработать с CSS с псевдо-классами, но я ничего не пробовал с JS 

$('.faq li .question').click(function () {
  $(this).find('.plus-minus-toggle').toggleClass('collapsed');
  $(this).parent().toggleClass('active');
});
.parent-container {
  padding: 0 20px 0 20px;
  max-width: 800px;
  width: 100%;
}
.faq {
  list-style: none;
  padding-left: 40px;
  padding-right: 20px;
}
.faq li {
  border-bottom: 1px solid #999;
  margin-bottom: 15px;
}
.faq .answer {
  font-size: 16px;
  line-height: 24px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, padding-bottom 0.5s ease;
}
.faq li.active .answer {
  max-height: 275px !important;
  padding-bottom: 25px;
  transition: max-height 0.5s ease, padding-bottom 0.5s ease;
}
.faq .question {
  font-size: 20px;
  font-weight: 800;
  position: relative;
  cursor: pointer;
  padding: 20px 0;
  transition: color 0.5s ease;
}
.faq li.active .question {
  color: #2d2d2d;
  transition: color 0.5s ease;
}

.faq .plus-minus-toggle {
  cursor: pointer;
  height: 21px;
  position: absolute;
  width: 21px;
  left: -40px;
  top: 50%;
  z-index: 2;
}
.faq .plus-minus-toggle::before, .faq .plus-minus-toggle::after {
  background: #9b1c21;
  content: '';
  height: 5px;
  left: 0;
  position: absolute;
  top: 0;
  width: 21px;
  transition: transform 500ms ease;
}
.faq .plus-minus-toggle::after {
  transform-origin: center;
}
.faq .plus-minus-toggle.collapsed::after {
  transform: rotate(90deg);
}
.faq .plus-minus-toggle.collapsed::before {
  transform: rotate(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"> 
	<div class="parent-container">
	  <ul class="faq">
		<li>
		  <h3 class="question">Frequently Asked Question?
			<div class="plus-minus-toggle collapsed"></div>
		  </h3>
		  <div class="answer">Answer. Donec vitae tellus risus. Aenean sed fermentum risus. Phasellus venenatis 
			ultricies dignissim. Nunc ante lectus, accumsan non porta at. Donec vitae tellus risus. Aenean sed 
			fermentum risus. Phasellus venenatis ultricies dignissim.</div>
		</li>
		<li>
		  <h3 class="question">Frequently Asked Question?
			<div class="plus-minus-toggle collapsed"></div>
		  </h3>
		  <div class="answer">Answer. Donec vitae tellus risus. Aenean sed fermentum risus. Phasellus venenatis 
			ultricies dignissim. Nunc ante lectus, accumsan non porta at. Donec vitae tellus risus. Aenean sed 
			fermentum risus. Phasellus venenatis ultricies dignissim.</div>
		</li>
	  </ul>
	</div>  
</div>

Я ожидаю, что ответ «Часто задаваемый вопрос» будет свернут, а затем щелкните раскрывающийся список под заголовком часто задаваемых вопросов для каждого вопроса. При нажатии знак «плюс» превращается в тире.

1 Ответ

0 голосов
/ 10 июля 2019

Попробуйте следующую библиотеку jQuery версии 3.4.1: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
...