Маленькие складные треугольники:как создать свертываемые разделы на веб-странице?

Question

На некоторых веб-страницах есть «поворотный» треугольный элемент управления, который может сворачивать подменю.Мне нужно такое же поведение, но для разделов формы.

Допустим, у меня была форма, в которой были указаны кредитор, имя, адрес и город.Некоторым пользователям моего сайта понадобится второй набор этих полей.Я бы хотел скрыть лишние поля для большинства пользователей.Те, кому нужны дополнительные поля, должны иметь доступ к ним одним щелчком мыши.Как бы я это сделал?

Answer 1

Ах, я думаю, вы имеете в виду, что хотите иметь в своей форме складные разделы.

Суммируя:

1. Поместите контент, который вы хотите свернуть, в отдельный DIV, сначала используя свойство CSS «display:none».
2. Оберните ссылку (тег A) вокруг треугольного изображения (или текста типа «Скрыть/Показать»), который запускает JavaScript для переключения свойства отображения.
3. Если вы хотите, чтобы треугольник «поворачивался» при раскрытии/отображении раздела, вы можете одновременно с этим заменить изображение с помощью JavaScript.

Вот лучшее объяснение: Как создать складной DIV с помощью Javascript и CSS [Обновление 27 января 2013 г. статья больше не доступна в сети, вы можете обратиться к источник этой HTML-страницы для прикладного примера, вдохновленного этой статьей]

Или, если вы выполните поиск в Google по таким словам, как «Сворачивающиеся разделы CSS» или что-то в этом роде, вы найдете множество других руководств, в том числе супер-модных (например, http://xtractpro.com/articles/Animated-Collapsible-Panel.aspx).

Answer 2

Самый простой способ скрыть/показать элемент с помощью JavaScript — установить свойство видимости элемента.

Учитывая ваш пример, представьте, что на вашей странице определена следующая форма:

<form id="form1">
    <fieldset id="lenderInfo">
        <legend>Primary Lender</legend>
        <label for="lenderName">Name</label>
        <input id="lenderName" type="text" />
        <br />
        <label for="lenderAddress">Address</label>
        <input id="lenderAddress" type="text" />
    </fieldset>
    <a href="#" onclick="showElement('secondaryLenderInfo');">Add Lender</a>
    <fieldset id="secondaryLenderInfo" style="visibility:hidden;">
        <legend>Secondary Lender</legend>
        <label for="secondaryLenderName">Name</label>
        <input id="secondaryLenderName" type="text" />
        <br />
        <label for="secondaryLenderAddress">Address</label>
        <input id="secondaryLenderAddress" type="text" />
    </fieldset>
</form>

Здесь следует отметить две вещи:

1. Вторая группа полей ввода изначально скрыта с помощью небольшого встроенного CSS.
2. Ссылка «Добавить кредитора» вызывает метод JavaScript, который сделает всю работу за вас.Когда вы нажимаете эту ссылку, она динамически устанавливает стиль видимости этого элемента, заставляя его отображаться на экране.

showElement() принимает идентификатор элемента в качестве параметра и выглядит следующим образом:

function showElement(strElem) {
    var oElem = document.getElementById(strElem);

    oElem.style.visibility = "visible";

    return false;
}

Почти каждый подход JavaScript будет делать это «под капотом», но я бы рекомендовал использовать фреймворк, который скрывает от вас детали реализации.Взгляни на JQuery, и Пользовательский интерфейс JQuery чтобы получить более четкий переход при скрытии/отображении элементов.

Answer 3

Вот простое решение только для CSS, в котором используется флажок:

.hideNext:not(:checked)+div {
  max-height: 0;
  overflow: hidden;
}

<label for="ch1">More Options</label><input id="ch1" type="checkbox" class="hideNext" />
<div>Whatever you want to hide.</div>
and then more stuff below..