Question

I have made this accordion to teach myself some jQuery with a help of a user from stack overflow: http://jsfiddle.net/LQsV5/

I was wondering how I could add the feature to change the tabs, so when the tab is closed, the background picture of the heading is grey and when the accordion is open, it stays like it is in the above example?

Thank you.

Answer 1

jsFiddle demo

CSS (Create a ".selected" class and set the desired background):

#acc h3 {padding-left:5px; padding-top: 2px; font-weight:bold; margin-top:5px; color:#fff; font-size:11px;
    background: #777; /* HERE SET YOUR GRAY IMAGE */
}

#acc h3.selected{
    background:url("http://img.uefa.com/imgml/comp/u19/sprite_4-6-8.png") no-repeat scroll 0pt -50px transparent;
}

Than toggle this .selected class with jQuery:

$('.acc li h3').next('.acc-section').hide(); // remove that line if you hide them inside your CSS
$('.acc li h3').click(function() {
    var el = $(this).next('.acc-section');
    $('.acc li h3').removeClass('selected');
    check = (el.is(':visible')) ? el.slideUp() : ($('.acc-section').slideUp()) (el.slideDown().prev('h3').addClass('selected'));
});

Prest attention that inside the jQuery I used: $('.acc li h3').next('.acc-section').hide();
If you don’t want to see your slider appear opened by default before the whole page is loaded and that see it hide, remove that line and set in your CSS:

.acc-section{display:hidden;}