Складные списки с использованием HTML и CSS

У меня есть сворачиваемый список, реализованный с использованием HTML и CSS. Список работает правильно, но мне нужна небольшая модификация.

Всякий раз, когда я нажимаю элемент в списке, он расширяется. Но по мере того, как я нажимаю на другой элемент в том же списке, ранее расширенный элемент обрушивается, а щелчок расширяется.

Помогите мне применить поведение, позволяющее одновременно развернуть несколько элементов списка.

Я хочу, чтобы это выполнялось только в HTML и CSS.

Вот реализация, которую я сейчас имею. Стили CSS:

.row { vertical-align: top; height: auto !important; }
list { display: none; }
.show { display: none; }
.hide:target + .show { display: inline; }
.hide:target { display: none; }
.hide:target ~ .list { display:inline; }
@media print { .hide, .show { display: none; } }

И разметка HTML:

<div class="row">
  <a href="#hide1" class="hide" id="hide1">Expand</a>
  <a href="#show1" class="show" id="show1">Collapse</a>
  <div class="list">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

Ответ 1

Если вы используете современный браузер, вы можете просто использовать HTML5 следующим образом:

<details>
  <summary>See More</summary>
  This text will be hidden if your browser supports it.
</details>

Ответ 2

Чистый HTML и CSS
Флажок и состояние :checked звучит как идеальное совпадение для вашего случая:

[id^="togList"],                        /* HIDE CHECKBOX */
[id^="togList"] ~ .list,                /* HIDE LIST */
[id^="togList"] + label  span + span,   /* HIDE "Collapse" */
[id^="togList"]:checked + label span{   /* HIDE "Expand" (IF CHECKED) */
  display:none;
}
[id^="togList"]:checked + label span + span{
  display:inline-block;                 /* SHOW "Collapse" (IF CHECKED) */
}
[id^="togList"]:checked ~ .list{
  display:block;                        /* SHOW LIST (IF CHECKED) */
}

<div class="row">
  <input id="togList1" type="checkbox">
  <label for="togList1">
    <span>Expand</span>
    <span>Collapse</span>
  </label>
  <div class="list">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

Ответ 3

Вы можете сделать это, используя библиотеку JQuery-mobile. https://jsfiddle.net/Asif92/wwx100f8/ См. Пример ниже:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="#" onclick="location.href='https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css'; return false;">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Collapsible Lists</h1>
  </div>

  <div data-role="main" class="ui-content">
    <h2>My Phonebook</h2>
    <div data-role="collapsible">
    <h4>A</h4>
    <ul data-role="listview">
      <li><a href="#">Adele</a></li>
      <li><a href="#">Agnes</a></li>
    </ul>
    </div>

    <div data-role="collapsible">
    <h4>B</h4>
    <ul data-role="listview">
       <li><a href="#">Billy</a></li>
       <li><a href="#">Bob</a></li>
    </ul>
    </div>

    <div data-role="collapsible">
    <h4>C</h4>
    <ul data-role="listview">
      <li><a href="#">Calvin</a></li>
      <li><a href="#">Cameron</a></li>
      <li><a href="#">Chloe</a></li>
      <li><a href="#">Christina</a></li>
    </ul>
    </div>
  </div>

  <div data-role="footer">
    <h1>Insert Footer Text Here</h1>
  </div>
</div> 

</body>
</html>