Wednesday, April 7, 2010

Multicolor jQuery Accordion widget

I received a question about having different elements in a jQuery accordion with different colors. There are probably many ways to achieve this. Below I'll show you how to do it with just a little bit of javascript.

$(document).ready(function(){
    $("#accordion").accordion();
    var my_colors = ["aqua", "black", "blue", "fuchsia", "green", "lime"];
    $('.ui-accordion-header').each( function(i) {
        $(this).css("background-color",my_colors[i])
    });
});

What is important to note here is the use of the css classes added by jQuery to an accordion to retrieve all accordion headers. I hope I answered the question... If I can find the time I'll try to put a polished demo on the web with complete source code.

2 comments:

  1. Multicolored accordion bands can be achieved by modifying the colors in the html script for the bands thus (tags removed as they are not permitted here):
    div id="exampleAccordion"
    h3 style="background:none;background-color:#ffa900;"/h3
    div style="background:none;background-color:#ffe5b3;"/div

    ReplyDelete
  2. hi,
    thank u so much Frédéric Crespo, your code work perfectly in background-color but i want to know how can i do that on background-image?
    thank u

    ReplyDelete