Попытка создать горизонтальный аккордеон с помощью CSS и HTML

Первый раз пишу здесь, но я всегда находил здесь полезную информацию!

Я строю сайт, который требует горизонтальной секции аккордеона. Я изменил пример с сайта, который использует: выбор цели.

То, что я хотел бы, для начального расположения 3 равных столбцов с коротким блоком начального содержания в каждом столбце. При щелчке по ссылкам исходный контент скрывается, а целевой раздел расширяется до 90%, а по двум другим разделам - до 5%. (Я добавлю 90-градусное преобразование в заголовок раздела и скрою другой контент).

На данный момент целевой раздел расширяется до 90%, но остальные два раздела остаются на 33% и оборачиваются ниже. Можно ли изменить "нецелевые" разделы с помощью этого метода?

Смотрите JSFiddle

HTML

<article class="how-accordion" id="how">

  <section id="acc1">

    <h2><a href="#acc1">Shows hidden content</a></h2>
    <p class="initial pt-5">Content to be hidden on click</p>
    <p>This content appears on page 1.</p>
    <a class="closedown" href="#how">Close</a>

  </section>

  <section id="acc2">

    <h2><a href="#acc2">Show 2nd hidden section</a></h2>
    <p class="initial pt-5">Content to be hidden on click</p>
    <p>This content appears on page 2.</p>
    <a class="closedown" href="#how">Close</a>

  </section>

  <section id="acc3">

    <h2><a href="#acc3">Show 3rd hidden section</a></h2>
    <p class="initial pt-5">Content to be hidden on click</p>
    <p>This content appears on page 3.</p>
    <a class="closedown" href="#how">Close</a>

  </section>

</article>

CSS

article.how-accordion {
  display: block;
  width: 100%;
  margin: 0 auto;
  background: yellow;
  overflow: auto;
  text-indent: 1em;
}

article.how-accordion section {
  position: relative;
  display: block;
  float: left;
  width: 33%;
  height: 12em;
  color: transparent;
  background-color: transparent;
  overflow: hidden;
  border-radius: 3px;
}

article.how-accordion section h2 {
  /*    position: absolute;*/
  font-size: 1em;
  font-weight: bold;
  width: 12em;
  height: 2em;
  /*    top: 12em;*/
  left: 0;
  text-indent: 1em;
  padding: 0;
  margin: 0;
  color: #ddd;
}

article.how-accordion section h2 a {
  display: block;
  width: 100%;
  line-height: 2em;
  text-decoration: none;
  color: blue;
  outline: 0 none;
}

.initial {
  color: black;
}

article.how-accordion section:target .initial {
  display: none;
}

.closedown {
  color: transparent;
}

article.how-accordion section:target .closedown {
  color: green;
}

article.how-accordion section:target {
  width: 90%;
  padding: 0 1em;
  color: #333030;
  background-color: red;
}

article.how-accordion section:target h2 {
  position: static;
  font-size: 1.3em;
  text-indent: 0;
  color: transparent;
}

article.how-accordion section,
article.how-accordion section h2 {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

Любая помощь или соответствующие статьи (я пытаюсь узнать, а также решить проблему) будет высоко ценится.

Спасибо

Источник

1 ответ

Решение

Вы можете сделать что-то с flexbox, если вы действительно хотите избежать JavaScript, но, как следует из комментария, это не очень практично. Обновленный CSS:

article.how-accordion {
  display: flex;
  width: 100%;
  margin: 0 auto;
  background: yellow;
  overflow: auto;
  text-indent: 1em;
}

article.how-accordion section {
  position: relative;
  display: block;
  float: left;
  height: 12em;
  color: transparent;
  background-color: transparent;
  overflow: hidden;
  border-radius: 3px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 5%;
}

article.how-accordion section h2 {
  /*    position: absolute;*/
  font-size: 1em;
  font-weight: bold;
  width: 12em;
  height: 2em;
  /*    top: 12em;*/
  left: 0;
  text-indent: 1em;
  padding: 0;
  margin: 0;
  color: #ddd;
}

article.how-accordion section h2 a {
  display: block;
  width: 100%;
  line-height: 2em;
  text-decoration: none;
  color: blue;
  outline: 0 none;
}

.initial {
  color: black;
}

article.how-accordion section:target .initial {
  display: none;
}

.closedown {
  color: transparent;
}

article.how-accordion section:target .closedown {
  color: green;
}

article.how-accordion section:target {
  /* width: 90%; */
  padding: 0 1em;
  color: #333030;
  background-color: red;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 90%;
}

article.how-accordion section:target h2 {
  position: static;
  font-size: 1.3em;
  text-indent: 0;
  color: transparent;
}

article.how-accordion section,
article.how-accordion section h2 {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

Скрипка: https://jsfiddle.net/qpn614eo/27/

Источник

Для будущих посетителей вот лучшее, что я нашел. Взято отсюда.

Каждый пример имеет связанный с ним jsfiddle.

Источник
Другие вопросы по тегам