How to make accordion tabs in different color when active

Question

I need to design accordion in the following way... http://jsfiddle.net/gmcLnowa/1/ as shown on fiddle.

I need to two things to be fixed.

One : How to keep first Tab open by default.

Second : How to show each active tab in different colour when that particular tab contents are active or visible.

Let us say when active

Example One: In Blue colour Example Two: in red colour Example Three: In yellow colour.

<div id="accordion">
  <ul>
    <li>
      <a href="#one">Example one</a>

    </li>
    <li>
      <a href="#two">Example two</a>

    </li>    
    <li>
      <a href="#three">Example three</a>

    </li>
  </ul>
        <div id="one" class="accordion">
        ONE 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. 
            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>
      <div id="two" class="accordion">
        TWO 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.
          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>
        <div id="three" class="accordion">
        THREE 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.
            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>
</div>

Answer 1

You can trigger a click on the first anchor on ready() to show the first accordian by default: Note that you should trigger it on the native element rather than the jQuery element.

JS:

$("a").click(function(){
  $(".active").removeClass("active");
  $(this).addClass("active");
})
$("a:first")[0].click()

CSS:

a[href="#one"].active{
  background:blue !important;
}
a[href="#two"].active{
  background:red !important;
}
a[href="#three"].active{
  background:yellow !important;
}

Demo

Answer 2

this is possible with jQuery

<a href="#one" colr="red">Example one</a>

chage color of custom color attribute that you want

$('#accordion a').click(function(){
    $('#accordion a').css('backgroundColor','transparent');
    $(this).css('backgroundColor',$(this).attr('colr'));

});

fiddle

Answer 3

You should alter your HTML to get this effect.

Added CSS:

#accordion div#one.accordion:target + a {
    color: blue;
}
#accordion div#two.accordion:target + a {
    color: red;
}
#accordion div#three.accordion:target + a {
    color: yellow;
}

Altered HTML: ( example )

<div id="accordion">
    <ul>
        <li>
            <div id="one" class="accordion">ONE.......</div>
            <a href="#one">Example one</a>    
        </li>
        <li>
            <div id="two" class="accordion">TWO.........</div>
            <a href="#two">Example two</a>    
        </li>
        <li>
            <div id="three" class="accordion">THREE........</div>
            <a href="#three">Example three</a>    
        </li>
    </ul>
</div>

Working Fiddle

Answer 4

For the first problem, I guess the only thing you can do is to append the hash #one to your page url or to use jQuery.

For the second problem, you can add this to your css:

#one {
    border-color: #C00;
}
#two {
    border-color: #FF0;
}
#three {
    border-color: #CF0;
}