This question has already been answered:

FAQ of 13 questions, all answers are hidden. When you click on a question, the answer to it should open, and all other answers (if there are open ones) should be closed. A second click on the question (open, that is) should close this answer. Tortured ... It does not work to make a closure by re-clicking. As a result, while left so (always there is 1 open question). Help, understand, I'm new. It is desirable that it is universal, since the number of questions changes periodically, something is removed from the middle of the list, and something is added.

ul { list-style-type: none; margin-bottom: 20px; font-size: 14pt !important; text-align: justify; } .question { padding: 5px 0; } .question span { border-bottom: 1px dashed #537098; padding: 0 1px; cursor: pointer; color: #537098; } #answer1, #answer2, #answer3, #answer4, #answer5, #answer6, #answer7, #answer8, #answer9, #answer10, #answer11, #answer12, #answer13 { display: none; margin-left: 20px; padding: 10px 0 5px 10px; } li p { padding: 5px; font-size: 14pt !important; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul> <li class="question" onclick="$('#answer1').slideDown(); $('#answer2, #answer3, #answer4, #answer5, #answer6, #answer7, #answer8, #answer9, #answer10, #answer11, #answer12, #answer13').slideUp();"><span>Вопрос 1</span></li> <li id="answer1">Ответ 1</li> <li class="question" onclick="$('#answer2').slideDown(); $('#answer1, #answer3, #answer4, #answer5, #answer6, #answer7, #answer8, #answer9, #answer10, #answer11, #answer12, #answer13').slideUp();"><span>Вопрос 2</span></li> <li id="answer2">Ответ 2</li> <li class="question" onclick="$('#answer3').slideDown(); $('#answer1, #answer2, #answer4, #answer5, #answer6, #answer7, #answer8, #answer9, #answer10, #answer11, #answer12, #answer13').slideUp();"><span>Вопрос 3</span></li> <li id="answer3">Ответ 3</li> <li class="question" onclick="$('#answer4').slideDown(); $('#answer1, #answer2, #answer3, #answer5, #answer6, #answer7, #answer8, #answer9, #answer10, #answer11, #answer12, #answer13').slideUp();"><span>Вопрос 4</span></li> <li id="answer4">Ответ 4</li> </ul>

Reported as a duplicate at Grundy. javascript Mar 12 '18 at 8:34 pm

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • Why do you put questions and answers in different elements of the list? - teran

3 answers 3

You have one big entity - Вопрос . A question may or may not have an answer. Start by using a single list item for a single entity. No need to split the question and answer in different li . The elements of the list usually represent homogeneous elements, you have a question, an answer, logic breaks, it has no meaning, the code and layout are complicated.

Let the answer be nested in li , like a span with a question

Next, the class .question you made, why not make a class .answer ? Why these #answer1 . You wrote one rule in css for a bunch of these #answerХ , it should be obvious that you need to make a class?

Do not paste the js code directly into html. Forget about onclick attributes, as they wrote about 15 years ago.

 $(".question span").click(function(){ var $a = $(this).next(".answer"); $(".answer").not($a).slideUp(); $a.slideToggle(); }); 
 ul { list-style-type: none; margin-bottom: 20px; font-size: 14pt !important; text-align: justify; } .question { padding: 5px 0; } .question span { border-bottom: 1px dashed #537098; padding: 0 1px; cursor: pointer; color: #537098; } .answer { display: none; margin-left: 20px; padding: 10px 0 5px 10px; } li p { padding: 5px; font-size: 14pt !important; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul> <li class="question"> <span>Вопрос 1</span> <div class="answer">Ответ 1</div> </li> <li class="question"> <span>Вопрос 2</span> <div class="answer">Ответ 2</div> </li> <li class="question"> <span>Вопрос 3</span> <div class="answer">Ответ 3</div> </li> <li class="question" > <span>Вопрос 4</span> <div class="answer">Ответ 4</div> </li> </ul> 

     $(".questions-block").on('click', ".question", function (e) { var $this = $(this) if ($this.hasClass('open')) { $this.removeClass('open').next().slideUp() } else { $this.closest(".questions-block").find(".question.open").next().slideUp() $this.addClass('open').next().slideDown() } }) 
     ul { list-style-type: none; margin-bottom: 20px; font-size: 14pt; text-align: justify; } .question { padding: 5px 0; } .question span { border-bottom: 1px dashed #537098; padding: 0 1px; cursor: pointer; color: #537098; } .answer { display: none; margin-left: 20px; padding: 10px 0 5px 10px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul class="questions-block"> <li class="question"><span>Вопрос 1</span></li> <li id="answer1" class="answer">Ответ 1</li> <li class="question"><span>Вопрос 2</span></li> <li id="answer2" class="answer">Ответ 2</li> <li class="question"><span>Вопрос 3</span></li> <li id="answer3" class="answer">Ответ 3</li> <li class="question"><span>Вопрос 4</span></li> <li id="answer4" class="answer">Ответ 4</li> </ul>

      If you do your HTML markup, here's how:

       ul { list-style-type: none; margin-bottom: 20px; font-size: 14pt !important; text-align: justify; } .question { padding: 5px 0; } .question span { border-bottom: 1px dashed #537098; padding: 0 1px; cursor: pointer; color: #537098; } #answer1, #answer2, #answer3, #answer4, #answer5, #answer6, #answer7, #answer8, #answer9, #answer10, #answer11, #answer12, #answer13 { display: none; margin-left: 20px; padding: 10px 0 5px 10px; } li p { padding: 5px; font-size: 14pt !important; } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul> <li class="question"><span>Вопрос 1</span></li> <li id="answer1">Ответ 1</li> <li class="question"><span>Вопрос 2</span></li> <li id="answer2">Ответ 2</li> <li class="question"><span>Вопрос 3</span></li> <li id="answer3">Ответ 3</li> <li class="question"><span>Вопрос 4</span></li> <li id="answer4">Ответ 4</li> </ul> <script> $('.question').each(function() { $(this).on('click', function() { $('.question').not($(this)).next().slideUp(); $(this).next().slideToggle(); //чтобы можно было скрыть при повторном нажатии }); }); </script>