如何为我的FAQ创建多个问题和隐藏答案？

Question

我正在为一个论坛提供FAQ，我正在使用jQuery显示和隐藏方法。我想知道如何为我的每个常见问题解答提出多个问题和答案。默认情况下，答案应该隐藏，直到有人点击问题。我试图使用display：none;在CSS中，但这没有影响。基本上，我想我的FAQ功能像谷歌钱包的常见问题解答：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来没有显示属性;

$(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>