html5 show hide

Question

html5How to click on a list item, the question will be displayed below the item, click on the question, and the answer will be displayed below the question? Click the question again to hide the answer.

Answer 1

Use JS to control the style. If the area you want to change is in the displayed state, change it to the hidden state. If it is hidden, change it to the displayed state. Use display:none

Answer 2

<style>
.hidden{display:none;}
</style>
<p class="liebiao">所有问题</p>
<ul class="list_ul hidden">

<li>
    <p>问题一</p>
    <p class="answer hidden">问题答案</p>
</li>

</ul>
$(".liebiao").click(function(){

$(".list_ul").show();

});
$(".list_ul li").click(function(){

$(this).find(".answer").toggle();

});