Как сделать так, чтобы инструкции появлялись по запросу пользователя?

Question

Мне нужно предоставить информацию для различных клиентов, когда они входят в систему для создания профиля. Я буду использовать HTML и Javascript для этой цели. То, что я хотел бы, является кратким набором инструкций, сопровождаемых возможностью показать более подробные инструкции. Если клиент выбирает просмотр более подробных инструкций, поле (в идеале) расширяется, чтобы показать больше содержимого.

Другие идеи, которые достигают аналогичного результата, также приветствуются, как и комментарии, которые просто указывают мне правильное направление. Предварительные исследования для меня мало что дали; Я предполагаю, что это во многом из-за того, что я новичок и не знаю, что искать. Это проблема условной видимости или это что-то совсем другое?

Большое спасибо за любую помощь.

Answer 1

Поместите скрытое содержимое в отдельный элемент контейнера, для которого изначально установлено значение none.Затем добавьте обработчик onclick к ссылке, которая показывает содержимое.Этот обработчик должен установить отображаемое значение на block или inline.Вот один из способов сделать это (их много).Настройте ваш HTML примерно так:

<p>
    [Instruction text here] 
    <a href="#" onclick="expandContent(this)">more ...</a><span class="more">
    [Additional content here]</span>
</p>

Некоторые CSS, чтобы изначально скрыть дополнительный контент:

.more
{
    display: none;
}

Создайте expandContent() функцию:

function expandContent(link)
{
    link.nextSibling.style.display = "inline";
}