如何为常见问题解答创建多个问题和隐藏答案?

Question

我正在为一个论坛做一个FAQ，我正在jQuery中使用显示和隐藏方法。我想知道如何为每个常见问题解答提出多个问题和答案。默认情况下，答案应隐藏，直到有人单击问题。我尝试使用显示：无;在 CSS 中，但这没有影响。基本上，我希望我的常见问题解答功能像谷歌钱包的常见问题解答一样：https://www.google.com/wallet/faq/

$(document).ready(function() {
$("button").click(function() {
$("p").toggle();
});
});

button {
background-color: white;
border-color: white;
border-bottom-width: inherit;
border-right-width: inherit;
outline-color: white;
border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Question: How do I get a gold star?</button>
<p>Answer: This depends on a number of things.</p>

Answer 1

将 p 的显示属性设置为 none;

$(document).ready(function() {
$("button").click(function() {
$(this).next("p").toggle();
});
});

button {
background-color: white;
border-color: white;
border-bottom-width: inherit;
border-right-width: inherit;
outline-color: white;
border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Question: How do I get a gold star?</button>
<p>Answer: This depends on a number of things.</p>