Q:

How to make First accordion tab opened by default?

I want to make the first tab in this accordion to be opened by default.
Here is the code on cssdeck : http://cssdeck.com/labs/5jlzqlt6

A:

If you're using bootstrap, you can skip all this convoluted stuff simply by adding one word after the collapse class for the accordion section you want expanded by default:
in
class="collapse in"

Wow that was easy.

A:

see here jsfiddle
add this to your css 
#accordion ul li:first-child div { 
    display:block;
    border-top:3px solid #FFCDCD;
} 

also i made a jq ( in a hurry ) to make the accordion work better
code :
$("#accordion ul li").each(function(){
var trigger= $(this).find('a')
var siblings = $(this).siblings()
var acc_text = $(this).find('.accordion')
    $(trigger).click(function(){
    var visible_text = siblings.find('.accordion').filter(":visible")
    $(acc_text).slideToggle()
    $(visible_text).slideUp()
    });
});

EDIT : if i got it right. you want to be able to have all tabs opened in the same time . see here jsfiddle
code : 
$("#accordion ul li").each(function(){
var trigger= $(this).find('a')
var acc_text = $(this).find('.accordion')
    $(trigger).click(function(){

        $(acc_text).slideToggle()

    });
});

or do you want when you click eg on " example two " all 3 tabs to open at once?. that's strange :) why would you want to do that ?
Snippet

$("#accordion ul li").each(function(){
    var trigger= $(this).find('a')
    var acc_text = $(this).find('.accordion')
    $(trigger).click(function(){
      
        $(acc_text).slideToggle()
  
    });
});
body{
background:#d0d0d5;
}


/*  Basic stucture
=====================*/
#accordion{margin:100px auto;width:400px;}
#accordion ul{list-style:none;margin:0;padding:0;}
.accordion{display:none;}
.accordion:target{display:block;}
#accordion ul li a{text-decoration:none;display:block;padding:10px;}
.accordion{padding:4px;}





/*  Colors 
====================*/
#accordion ul{
/*box-shadow*/
-webkit-box-shadow:0 4px 10px #BDBDBD;
   -moz-box-shadow:0 4px 10px #BDBDBD;
        box-shadow:0 4px 10px #BDBDBD;
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
}
#accordion ul li a{
background:#fff;
border-bottom:1px solid #E0E0E0;
color:#999;
}
.accordion{
background:#fdfdfd;
color:#999;
}
.accordion:target{
border-top:3px solid #FFCDCD;
}

#accordion ul li:first-child div { 
display:block;
border-top:3px solid #FFCDCD;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion">
  <ul>
    <li>
      <a href="#one">Example one</a>
      <div id="one" class="accordion">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
      </div>
    </li>
    <li>
      <a href="#two">Example two</a>
      <div id="two" class="accordion">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
      </div>
    </li>    
    <li>
      <a href="#three">Example three</a>
      <div id="three" class="accordion">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
      </div>
    </li>
  </ul>
</div>

