CODEWITHSUNDEEP
htmlcssaccordionhorizontal-accordion
Andy Davies
Andy Davies

Reputation: 25

Trying to create a horizontal accordion using css & html

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

Upvotes: 1

Views: 3573

Answers (2)

Herz3h
Herz3h

Reputation: 712

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

Each example has an associated jsfiddle associated with it.

Upvotes: 0

git-e-up
git-e-up

Reputation: 904

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/

Upvotes: 1

Related Questions