Смежные CSS складные виджеты

Question

Я использовал этот учебник (https://alligator.io/css/collapsible/) для создания 2 разборных виджетов. Мне нужно, чтобы метки заголовков были смежными друг с другом на одной строке, а разборная часть занимала длину обоих заголовков, как показано на рисунке. Как это можно сделать?

Я пытался использовать position: absolute;, но тогда один заголовок остается невыбираемым, а содержащая его граница, окруженная им, остается незатронутой его расширением, что является проблемой.

Кроме того, как бы я сделал так, чтобы, если один складной виджет открыт, другой автоматически закрывался?

Answer 1

Вам необходимо изменить несколько вещей:

1. Изменить структуру HTML.
2. По умолчанию установите первое радио, чтобы отобразить содержимое первой вкладки по умолчанию.
3. В элементе оболочки измените display: grid на display: flex и wrap содержимое
4. Я внес много необходимых изменений в CSS, так что проверьте это .

body {
  font-family: consolas;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

input.collapse[type="radio"] {
  display: none;
}

.lbl-toggle {
  cursor: pointer;
  border: solid 1px #FAE042;
  transition: all 0.25s ease-out;
  order: 1;
  display: block;
  padding: .3rem 1rem;
  width: 50%;
  background-color: rgba(250, 224, 66, .2);
  font-weight: bold;
}

.lbl-toggle:hover {
  color: #000;
}

.lbl-toggle:first-of-type {
  border-top-left-radius: 7px;
}

.lbl-toggle:last-of-type {
  border-top-right-radius: 7px;
}

.collapsible-content {
  overflow: hidden;
  width: 100%;
  max-height: 0;
  order: 2;
  padding: 0 1rem;
  background-color: #FAE042;
  border-bottom: 1px solid rgba(250, 224, 66, .45);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  display: inline-block;
}

.toggle:checked+.lbl-toggle {
  background-color: #FAE042;
}

.toggle:checked+.lbl-toggle+.collapsible-content {
  max-height: 100%;
}

.collapsible-content th.head {
  padding: 6px 4px;
  font-size: small;
}

.collapsible-content td.data {
  padding: 6px 4px;
}

.lbl-toggle::after {
  content: " ";
  display: inline-block;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;
  vertical-align: middle;
  margin-left: 0.7rem;
  transition: transform 0.2s ease-out;
}

.toggle:checked+.lbl-toggle::after {
  transform: rotate(90deg);
}

.toggle:checked+.lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

<div class="wrapper">
  <input class="collapse toggle" id="#collapsible1" type="radio" name="collapsibleItem" checked/>
  <label for="#collapsible1" class="lbl-toggle">
        Header 1        
        </label>
  <div class="collapsible-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum, sapien et consectetur finibus, elit ex sodales purus, vel pretium libero lectus feugiat erat.</p>
  </div>


  <input class="collapse toggle" id="#collapsible2" type="radio" name="collapsibleItem" />
  <label for="#collapsible2" class="lbl-toggle">
          Header 2          
        </label>
  <div class="collapsible-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum, sapien et consectetur finibus, elit ex sodales purus, vel pretium libero lectus feugiat erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum, sapien et
      consectetur finibus, elit ex sodales purus, vel pretium libero lectus feugiat erat. </p>
  </div>
</div>

Для второго вопроса вместо флажков можно использовать переключатели.

<input id="collapsible1" name="collapsibleItem" class="toggle" type="radio">
<input id="collapsible2" name="collapsibleItem" class="toggle" type="radio">
<input id="collapsible3" name="collapsibleItem" class="toggle" type="radio">

input[type='radio'] {
  display: none;
}

Обратите внимание, что все рад ios имеют атрибут с тем же именем; необходимо пометить текущее помеченное радио при проверке нового.