Create CSS-Based Horizontal Accordion

create-css-based-horizontal-accordion.markdown

Create CSS-Based Horizontal Accordion

http://www.hongkiat.com/blog/css-content-accordion/

A Pen by Yang Li on CodePen.

License.

index.html

<div class="accordion horizontal">
  <section id="about">
    <h2><a href="#about">About Us</a></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris</p>
  </section>

  <section id="services">
    <h2><a href="#services">Services</a></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris
      sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel
      porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
  </section>

  <section id="blog">
    <h2><a href="#blog">Blog</a></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris
      sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel
      porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
  </section>

  <section id="portfolio">
    <h2><a href="#portfolio">Portfolio</a></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris
      sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel
      porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
  </section>

  <section id="contact">
    <h2><a href="#contact">Contact</a></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris
      sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel
      porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
  </section>
</div>

script.js

// http://www.hongkiat.com/blog/css-content-accordion/

style.css

/*Define Accordion box*/
.accordion {
    width: 830px;
    overflow: hidden;
    margin: 10px auto;
    color: #474747;
    background: #414141;
    padding: 10px;
}

.accordion section:target {
    background: #FFF;
    padding: 10px;
}

.accordion section:target:hover {
    background: #FFF;
}

.accordion section:target h2 {
    width: 100%;
}

.accordion section:target h2 a {
    color: #333;
    padding: 0;
}

.accordion section:target p {
    display: block;
}

.accordion section h2 a {
    padding: 8px 10px;
    display: block;
    font-size: 16px;
    font-weight: normal;
    color: #eee;
    text-decoration: none;
}

/* Create the headlines for each of the slides */
.accordion section {
    float: left;
    overflow: hidden;
    color: #333;
    cursor: pointer;
    background: #333;
    margin: 3px;
}

.accordion section:hover {
    background: #444;
}

.accordion section p {
    display: none;
}

.accordion section:after {
    position: relative;
    font-size: 24px;
    color: #000;
    font-weight: bold;
}

.accordion section:nth-child(1):after {
    content: '1';
}

.accordion section:nth-child(2):after {
    content: '2';
}

.accordion section:nth-child(3):after {
    content: '3';
}

.accordion section:nth-child(4):after {
    content: '4';
}

.accordion section:nth-child(5):after {
    content: '5';
}

.horizontal section {
    width: 5%;
    height: 250px;
    -moz-transition: width 0.2s ease-out;
    -webkit-transition: width 0.2s ease-out;
    -o-transition: width 0.2s ease-out;
    -ms-transition: width 0.2s ease-out;
    transition: width 0.2s ease-out;
}

/*Position the number of the slide*/
.horizontal section:after {
    top: 140px;
    left: 15px;
}

/*Header of closed slide*/
.horizontal section h2 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    width: 240px;
    position: relative;
    left: -100px;
    top: 85px;
}


/*On mouse over open slide*/

.horizontal section:target {
    width: 73%;
    height: 230px;
}

.horizontal section:target h2 {
  top: 0px;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}