Сделать список разворачивающимся на мобильных

Question

Есть обычный маркированный список <ul> со множеством элементов. Нужно на мобильных устройствах выводить только первые 5 пунктов, а дальше ссылку "Развернуть список".

@media (max-width:767px) {
  li:nth-child(n+6){
     display:none;
  }
}

А дальше что делать? Спасибо!

Answer 1

Можно воспользоваться псевдоклассом :target

a {
  display: none;
}

@media (max-width:767px) {
  li:nth-child(n+6) {
    display: none;
  }
  #list:target li {
    display: list-item;
  }
  #list:target~.show {
    display: none;
  }
  #list:target~.hide {
    display: inline;
  }
  a.show {
    display: inline;
  }
}

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
</ul>
<a href="#list" class="show">Развернуть список</a>
<a href="#" class="hide">Свернуть список</a>

БЛОГ НА HUSL

Сделать список разворачивающимся на мобильных

Ответы (1 шт):