Trying to create a horizontal accordion using css & html

Question

First time posting on here, but I've always found useful info on here!

I am building a site which requires a horizontal accordion section. I have modified an example from sitepoint which uses :target selection.

What I would like is for the initial layout of 3 equal columns with a short block of initial content in each column. When the links are clicked the initial content is hidden and the targeted section to expand to 90% with the two other sections reducing to 5%. (I will add a 90deg transform to the section header and hide the other content).

At the moment the targeted section expands to 90% but the other two sections remain at 33% and wrap below. Is it possible to modify the 'un-targeted' sections using this method?

See 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;
}

Any help or relevant articles (I'm trying to learn as well as solve the problem) would be much appreciated.

Thanks

Not sure this is possible with just CSS. The reason for this is there's no CSS selector to select previous siblings (see https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector for more info) . To get you close, I believe you're looking for the sibling selector `~`. Add `article.how-accordion section:target ~ section { width: 5%; }` on line 68 of your CSS. This will tell every `section` that is a (sibling of a targeted `section` to be 5% wide. But the issue is that it only selects _future_ `section`s. Javascript could handle this easily though utilizing CSS classes — WOUNDEDStevenJones, Jun 12 '18 at 19:41
Thanks, will check out the info about sibling selectors tomorrow. — Andy Davies, Jun 12 '18 at 20:10

score 1 · Accepted Answer · answered Jun 12 '18 at 19:56

You can do something with flexbox if you really want to avoid javascript, but as the comment suggests, this isn't super practical. Updated 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/

Thanks, will have a play with it them as flex items tomorrow. I’m still working on my JavaScript skills and don’t think I’ve got the JS chops got it yet. — Andy Davies, Jun 12 '18 at 20:13

score 0 · Answer 2 · answered Jul 15 '20 at 09:19

0

For future visitors, here is the best I've found. Taken from here.

Each example has an associated jsfiddle associated with it.

answered Jul 15 '20 at 09:19

Herz3h

614
5
20

Trying to create a horizontal accordion using css & html

2 Answers2