CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Learning
Learning

Reputation: 20001

How to make accordion tabs in different color when active

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>

Upvotes: 3

Views: 1095

Answers (4)

Mr_Green
Mr_Green

Reputation: 41832

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

Upvotes: 1

T J
T J

Reputation: 43156

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

Upvotes: 2

Man Programmer
Man Programmer

Reputation: 5356

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

Upvotes: 1

Oscar Fanelli
Oscar Fanelli

Reputation: 3657

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

Upvotes: 0

Related Questions