Как создать расширяемую страницу часто задаваемых вопросов в HTML?

StackOverflow https://stackoverflow.com/questions/2403146

  •  18-09-2019
  •  | 
  •  

Вопрос

Я хотел бы создать страницу часто задаваемых вопросов для моего веб -сайта, на которой перечислены все вопросы как гиперссылки. Когда ссылка нажимается, ответ на этот вопрос должен расширяться под ним.

Ответы должны быть скрыты по умолчанию, и предпочтительно щелчок по ссылке переключает видимость ответов.

Какие-нибудь мысли?

Редактировать

Я попробовал несколько предложений, но, к сожалению, похоже, что сайты Google не позволяют ни одной из этих функций в 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>

Другие советы

Здесь возможный подход:

<html><body><script>

function toggleElement(id)
{
    if(document.getElementById(id).style.display == 'none')
    {
        document.getElementById(id).style.display = '';
    }
    else
    {
        document.getElementById(id).style.display = 'none';
    }
}
</script>
<p>
<a href="javascript:toggleElement('a1')">Is this a question?</a>
</p>
<div id="a1" style="display:none">
This is an answer.
</div>
</body>
</html>

Ну, есть ответы в div контейнер каждый ниже вопроса.

Divs будет иметь display:hidden атрибут по умолчанию.

Нажав на ссылки, этот стиль CSS будет удален с помощью JavaScript.

Что -то вроде этого с запросом (нужно тестирование на опечатки и т. Д.):

$(function()

  { $("a[name='Question1']").click(function()

    { $("div[name='Answer1']").removeClass("answer-hidden"); }); });

В HTML вы используете этот шаблон:

<div style="parentContainer">
  <div style="titleContainer" onclick="toggleContents(this)">Link to click on</div>
  <div style="contentContainer">Some content here.</div>
</div>

и в JavaScript переключать

function toggleContents(elm) {
  var contentContainer = elm.parentNode.getElementsByTagName("div")[1];
  contentContainer.style.display = (contentContainer.style.display == 'block') ? 'none' : 'block';
}

Возможно, вы захотите изучить код "расширяемого FAQ" - он доступен на GitHub:https://github.com/solidmvc/expandablefaqИ у него есть механизация расширения Collapse Avialable at /ui/templates/front/faqslist.php ( https://github.com/solidmvc/expandablefaq/blob/master/ui/templates/front/faqslist.php )

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top