pure css horizontal accordion: how to have panel open on load


Tags: html,css,accordion,onload

Problem :

I created a horizontal accordion using the target: method mentioned here:

http://www.hongkiat.com/blog/create-css-based-content/

While the accordion works great, I wanted to have the first panel of the accordion be open when the page loads.

Is there an easy way to do this?



Solution :

It'll be better to use only Javascript.

  1. Add an ID to the anchor inside the section that needs to be open:

    <section id="about">
        <h2><a id="tab-active" href="#about">About Us</a></h2>
        <p>Tab content here</p>
    
  2. Add Javascript to click the anchor automatically:

    document.getElementById('tab-active').click();
    

Here's the full example provided by you, now with Javascript:

//JS
document.getElementById('tab-active').click();
/*CSS*/
/*Define Accordion box*/
.accordion { 
     width:830px;
     overflow:hidden; 
     margin:10px auto; 
     color:#474747; 
     background:#414141; 
     padding:10px; 
}

.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'; }.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; 
}

.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;
      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);
     transform: rotate(90deg);
     width:240px; 
     position:relative; 
     left:-100px; 
     top:85px;
} 
/*On mouse over open slide*/
.horizontal :target{ 
     width:73%;
     height:230px; 
}
.horizontal :target h2{ 
     top:0px;
     left:0;
     -webkit-transform:rotate(0deg);
     -moz-transform:rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg); 
}
<!-- HTML -->
<div class="accordion horizontal">
    <section id="about">
    <h2><a id="tab-active" 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 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 elemaentum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</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>
        <h2>Blog</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>
        <h2>Portfolio</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>
        <h2>Contact</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>


    CSS Howto..

    How to center an iframe, responsive

    How to remove the yellow row highlighting

    How to center two columns using CSS without using a fixed width container?

    how to avoid extra blank page at end while printing?

    ASP.NET - how to retrieve CSS styles applied by javascript on page postback?

    How do I stop the FLOAT (without extra markup)?

    how to overwrite css style in asp.net page?

    CSS property padding-top only works on the first element of a list. How do I apply to all the elements?

    background-image on divs aren't showing; the divs are collapsing instead

    Ribbon and stars - How to get this done without an image file?

    How to display 20 columns in html design

    Any idea how to add this sinking hover effect to an image/link?

    How to get style of a div from javascript file

    How to reflect updates to CSS at runtime in Visual Studio 2012?

    CSS how to select nav and li tags but exclude specified class?

    Jquery Dropdownlist not shows the selected item.?

    css how to stretch center div to fill allowable area

    How to create item detail view with css

    Do I need to use float:clear to have content show where I want it to show?

    how to make background fit on screen bootstrap3

    How can I turn a bullet image into a link?

    how can i add a css file to body of a page?

    How to select two elements with “> span” in CSS?

    css in firefox and ie is rendering old css file…chrome shows new css just fine

    How To Insert Some Content Before An HTML Element In The Runtime Using CSS

    How to apply CSS styles to links that appear in table headers?

    How to Center a image with HTML CSS

    How to do a webkit css endless rotation-animation.

    How to create icons like font awesome

    How to set link visited color in JQuery