如何在HTML中创建可扩展的FAQ页面？

我想为我的网站创建一个FAQ页面,将所有问题列为超链接.单击链接后,该问题的答案应在其下方展开.

默认情况下,答案需要隐藏,最好点击链接切换答案的可见性.

有什么想法吗？

编辑

我已经尝试了几个建议,但遗憾的是它看起来像谷歌网站不允许在HTML中的任何功能.我不能使用脚本,样式,嵌入,iframe或基本文本格式旁边的任何内容.每个人都有很棒的想法,但看起来我不得不满足于目录风格常见问题解答.

解决方法

使用jQuery的简单示例：

的JavaScript / jQuery的

<script type="text/javascript">
$(document).ready(function(){
    $('.faqlink').click(function(){
        $('.content').hide();
        $(this).next('.content').show();
    });
});
</script>

CSS

<style type="text/css">
.content {
    display: hidden;
}
</style>

HTML

<h2>My FAQ</h2>
<a class="faqlink" href="#">Link 1</a>
<div class="content">lorem ipsum</div>
<a class="faqlink" href="#">Link 2</a>
<div class="content">lorem ipsum</div>
<a class="faqlink" href="#">Link 3</a>
<div class="content">lorem ipsum</div>

原文地址：https://www.jb51.cc/html/226014.html