如何在HTML中创建可扩展的FAQ页面？ [英] How to create expandable FAQ page in HTML?

问题描述

我想为我的网站创建一个FAQ页面，将所有问题列为超链接。当点击链接时，该问题的答案应该扩展到下方。

默认情况下，答案需要隐藏，最好点击链接来切换答案'能见度。

有什么想法？

编辑

我尝试了几个建议，但不幸的是，它看起来像谷歌网站不允许在HTML中的任何功能。我不能使用脚本，样式，嵌入，iframe或任何除基本文本外的格式。每个人都有很棒的想法，但是看起来我必须要解决一个Table of Contents样式FAQ。

jQuery：

JavaScript / jQuery

 < script type =文本/ 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>我的常见问题< / h2> 
< a class =faqlinkhref =＃>连结1< / a> 
< div class =content> lorem ipsum< / div> 
< a class =faqlinkhref =＃>连结2< / a> 
< div class =content> lorem ipsum< / div> 
< a class =faqlinkhref =＃>连结3< / a> 
< div class =content> lorem ipsum< / div> 
  

I'd like to create an FAQ page for my website that lists all of the questions as hyperlinks. When the link is clicked, the answer for that question should expand out beneath it.

The answers need to be hidden by default, and preferably clicking the link toggles the answers' visibility.

Any thoughts?

Edit

I've tried several of the suggestions, but unfortunately it looks like google sites doesn't allow any of that functionality in the html. I can't use scripts, styles, embed, iframe, or anything beside basic text formatting it would appear. Great ideas everyone, but it looks like I'll have to settle for a Table of Contents style FAQ.

解决方案

Simple example using 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>

这篇关于如何在HTML中创建可扩展的FAQ页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！