Clever Geek Handbook

How to make accordion tabs in different colors active

I need to create an accordion like this: http://jsfiddle.net/gmcLnowa/1/ as shown in the fiddle.

I need to install two things.

One . How to keep the first tab as default.

Second . How to show each active tab in a different color when that particular tab content is active or visible.

Let's say when active

Example 1: blue Example two: red Example 3. Yellow.

<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>
+3


source to share


4 answers


You can trigger a click on the first anchor ready()

to show the first consonant by default: Note that you must trigger it on a native element, not a 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

+2


source


this is possible with jQuery

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

The color of the color custom color attribute you want



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

});

fiddle

+1


source


You have to change 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;
}

Modified 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 script

+1


source


For the first problem, I think the only thing you can do is add a hash #one

to the page url or 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;
}
0


source






More articles:


All Articles