Change li background colour?

[bogus]

Hi all,

so I have a list that got an collapsable options panel. I toggle the panel with jquerys slideToggle. so far so good.
I’d like to have the opened list item to have a white background color. permanently as long as its opened.
I’ve to modify the js to affect the css, right? But how’s that going without affecting all other list items?

heres the thing: [JSfiddle](http://jsfiddle.net/rJzeN/1/ “JSfiddle”)

[bogus]

mhh this doesn’t do anything, does it?

I think I have to toggle the background colour by setting a css property by JS. But I don’t know how I select the li (and only that one) that is currently opened. Haven’t got to learn JS properly :(

[Kitty Giraudel]

Basically, you have to make your JavaScript add a class to the clicked list item. Then, you target this class with your CSS to do whatever you want.

jQuery

$(‘.my-list’).on(‘click’, ‘li’, function() {
…
$(this).addClass(‘active’).siblings().removeClass(‘active’);
});

CSS

.active {
background: whatever;
}

[bogus]

yeah, but can’t i just toggle it by the JS itself?

$(document).ready(function () {
$(“.options”).slideUp();
$(“.optionstoggle”).click(function() {
var toggletext = $(this).closest(“div”).find(“.options”);
$(this.parentNode.parentNode).css({‘background-color’:’#ff0000′});
var txt = toggletext.is(‘:visible’) ? ‘more’ : ‘less’;
$(this).text(txt);
toggletext.stop(true, true).slideToggle(“fast”);
});
});

i added a line that changes the css property of the parentsnode parent node oO. It works, but only one way. it doesn’t switch back, when closing the options panel. how would that work?

[Author]

Posts