Попытка создать горизонтальный аккордеон с помощью CSS и HTML - PullRequest
Новая
       25

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

0 голосов
/ 12 июня 2018

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

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

Я хотел бы, чтобы исходная компоновка состояла из 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 Ответ

0 голосов
/ 12 июня 2018

Вы можете сделать что-то с 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;
}

Fiddle: https://jsfiddle.net/qpn614eo/27/

...