Последние учебники веб-разработки
 

W3.CSS Аккордеоны


аккордеон

Аккордеон используется, чтобы показать (и скрыть) содержание, которое разбивается на разделы.

Нажмите на кнопку "Открыть Раздел" ниже, чтобы увидеть, как это работает:

Lorem Ipsum Dolor сидеть Амет, consectetur adipisicing Элит, СЭД у eiusmod Tempor incididunt ут Лаборе и др Dolore магна aliqua. Ут enim объявления миним veniam, Quis nostrud ullamco Laboris упражнение НИСИ ут aliquip ех еа Commodo consequat.

Аккордеон с фотографиями:

Язык Тролля, Норвегия

Класс w3-гармошка определяет гармошку, а класс W3-гармошки контента определяет часть будет отображаться:

пример

<div class="w3-accordion w3-light-grey">
  <button onclick="myFunction('Demo1')" class="w3-btn-block w3-left-align">
    Open Section 1
  </button>
  <div id="Demo1" class="w3-accordion-content w3-container">
    <p>Some text..</p>
  </div>
  <button onclick="myFunction('Demo2')" class="w3-btn-block w3-left-align">
    Open Section 2
  </button>
  <div id="Demo2" class="w3-accordion-content w3-container">
    <p>Some text..</p>
  </div>
</div>

<script>
function myFunction(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else {
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>

Попробуй сам "

И элемент, который используется для открытия на аккордеоне и содержание аккордеону может быть любой HTML элемент.


Аккордеон vs. раскрывающийся

В списке ниже показана разница между гармошкой и выпадающего списка:

Аккордеоны

Lorem Ipsum Dolor сидеть Амет, consectetur adipisicing Элит, СЭД у eiusmod Tempor incididunt ут Лаборе и др Dolore магна aliqua. Ут enim объявления миним veniam, Quis nostrud ullamco Laboris упражнение НИСИ ут aliquip ех еа Commodo consequat.


  • Содержимое 100% в ширину (охватывает всю ширину родительского элемента)
  • При открытии, он толкает содержимое страницы вниз, если таковые имеются (позиция: относительная)
  • Часто используется для "открытых" несколько разделов
  • Содержание минимально 160px в ширину и более, если это необходимо
  • При открытии, он лежит поверх содержания страницы (позиция: абсолютная)
  • Часто используется для одной секции "открыть"

Аккордеон Кнопки

Вы можете использовать любой HTML элемент, чтобы открыть содержимое аккордеона. Мы предпочитаем кнопку с классом W3-БТН-блок, поскольку она охватывает всю ширину родительского элемента, так же как и содержание аккордеона (ширина 100%). Помните, что кнопки в W3.CSS сосредоточены по умолчанию. Используйте класс W3-выравнивания влево , если вы хотите , чтобы они выровнен по левому краю вместо этого. Тем не менее, вы не должны следовать нашему подходу - аккордеон будет хорошо выглядеть в любом случае:

Lorem Ipsum ...

по

Lorem Ipsum ...

Сосредоточенный содержание, как хорошо!

пример

<div class="w3-accordion w3-light-grey">
  <button onclick="myFunc('Demo1')" class="w3-btn">
    Normal button
  </button>
  <div id="Demo1" class="w3-accordion-content">
    <p>Lorem ipsum...</p>
  </div>
  <button onclick="myFunc('Demo2')" class="w3-btn-block w3-left-align w3-green">
    Left aligned & full-width
  </button>
  <div id="Demo2" class="w3-accordion-content">
    <p>Lorem ipsum...</p>
  </div>
  <button onclick="myFunc('Demo3')" class="w3-btn-block w3-red">
  Centered & full-width
  </button>
  <div id="Demo3" class="w3-accordion-content w3-center">
    <p>Centered content as well!</p>
  </div>
</div>

Попробуй сам "


Активные кнопки аккордеона

чтобы выделить аккордеоны, которые открыты (нажал на) С помощью JavaScript:

Какой-то текст ..

Другой текст ..

пример

// Add the w3-red class to all opened accordions
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
  x.className += " w3-show";
  x.previousElementSibling.className += " w3-red";
} else {
  x.className = x.className.replace("w3-show", "");
  x.previousElementSibling.className =
  x.previousElementSibling.className.replace("w3-red", "");
}

Попробуй сам "


Аккордеон Ширина

По умолчанию, ширина гармошки составляет 100%. Чтобы изменить это, изменить ширину CSS свойство контейнера w3-гармошку:

Какой-то текст ..

Какой-то текст ..

Какой-то текст ..

По

Какой-то текст ..

пример

<div class="w3-accordion w3-light-grey" style="width:50%">
  <button onclick="myFunction('Demo1')" class="w3-btn-block">
    50%
  </button>
  <div id="Demo1" class="w3-accordion-content">
    <p>Some text..</p>
  </div>
</div>

Попробуй сам "


Аккордеон Содержание

Аккордеон со ссылками:

пример

<div class="w3-accordion w3-light-grey">
  <button onclick="myFunction('Demo1')" class="w3-btn-block w3-left-align">
    Accordion
  </button>
  <div id="Demo1" class="w3-accordion-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Попробуй сам "

Аккордеон как карты со списками:
  • Джил
  • Ева
  • Адам

пример

<div class="w3-accordion w3-card-4">
  <button onclick="myFunction('Demo1')" class="w3-btn-block w3-left-align">
    Accordion
  </button>
  <div id="Demo1" class="w3-accordion-content">
    <ul class="w3-ul">
      <li>Jill</li>
      <li>Eve</li>
      <li>Adam</li>
    </ul>
  </div>
</div>

Попробуй сам "

Аккордеон внутри Sidenav(Примечание: вы узнаете больше о побочных навигаций позже):

пример

<nav class="w3-sidenav w3-light-grey w3-card-2" style="width:200px;">
  <a href="#">Link</a>
  <div class="w3-accordion">
    <a onclick="myAccFunc()" href="#">Accordion</a>
    <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <div class="w3-dropdown-click">
    <a onclick="myDropFunc()" href="#">Dropdown</a>
    <div id="demoDrop" class="w3-dropdown-content w3-white w3-card-4">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <a href="#">Link</a>
  <a href="#">Link</a>
</nav>

Попробуй сам "


Анимационные Аккордеоны

Используйте любой из классов W3-animate- исчезать, увеличения или слайд в содержании аккордеона:

пример

<div id="Demo1" class="w3-accordion-content w3-animate-zoom">

Попробуй сам "