АККОРДЕОН НА CSS3

Используя скрытые элементы input и label и только CSS, мы создадим аккордеон с анимацией открытия и закрытия содержимого области.

Сегодня мы поэкспериментируем со смежными и общими родственными комбинаторами (Adjacent Sibling (+) General Sibling (~)) и и псевдо-классом :checked. Используя скрытые входы и ярлыки, мы будем создавать аккордеон, который будет анимировать содержимое области на открытии и закрытии.
Today we'll experiment some more with the adjacent and general sibling combinator and the :checked pseudo-class.Using hidden inputs and labels, we will create an accordion that will animate the content areas on opening and closing.
Замечания
Adjacent Sibling (+) — cоседний родственный комбинатор. Обозначается знаком +, который разделяет два простых селектора. Пробелы не учитываются.
Селектор в форме E+F значит, что элемент F следует сразу за элементом E в иерархии документа, исключая различные комментарии и т.п., и они обязательно имеют одного родителя.
General Sibling (~) — обобщенный родственный комбинатор. Обозначается знаком ~ (тильда), который разделяет два простых селектора. Пробелы не учитываются.
Селектор в форме E~F значит, что элемент F следует за элементом E в иерархии документа, исключая различные комментарии и т.п., и они обязательно имеют одного родителя. В отличии от соседнего родственного комбинатора Adjacent Sibling (+), F необязательно следует сразу за E в иерархии документа, и F может быть не один.

Сегодня мы еще немного поэкспериментировать со смежными и общих брат комбинатор и: checked псевдо-класса. Используя скрытые входы и ярлыки, мы будем создавать аккордеон, который будет анимировать содержимое области на открытии и закрытии.
Есть много вариаций CSS только для аккордеона вокруг, большинство из которых реализуется с помощью: цель псевдо-класса. Проблема с использованием: цель в том, что мы не можем закрыть содержимое области еще раз или несколько разделов открыты в то же время. С помощью скрытых флажки, мы можем контролировать открытие и закрытие. Кроме того, мы можем также использовать переключатель, если только один раздел должны быть открыты одновременно.
Итак, давайте начинать!
Пожалуйста, обратите внимание: результатом этого урока будет работать только по назначению в браузерах, которые поддерживают CSS3 свойства в использовании.

РАЗМЕТКИ

Мы будем идти через пример, который использует флажки, где содержание раздела открыта по умолчанию (входной необходимо «проверить»). Все будет обернут в контейнере с классом -контейнером переменного тока. Для каждого элемента, мы будем иметь флажок, метки и статью, в которой это содержание раздела этого элемента:
<section class="ac-container">
    <div>
        <input id="ac-1" name="accordion-1" type="checkbox" />
        <label for="ac-1">About us</label>
        <article class="ac-small">
            <p>Some content... </p>
        </article>
    </div>
    <div>
        <input id="ac-2" name="accordion-1" type="checkbox" checked />
        <label for="ac-2">How we work</label>
        <article class="ac-medium">
            <p>Some content... </p>
        </article>
    </div>
    <div><!--...--></div>
</section>

0 комментариев

Оставить комментарий