The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Change li background colour?

  • # May 3, 2013 at 4:32 pm

    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]( “JSfiddle”)

    # May 3, 2013 at 4:46 pm

    This reply has been reported for inappropriate content.

    Try adding this to your CSS:

    .filelist li:active{
    background: #fff;

    # May 4, 2013 at 5:31 am

    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 :(

    # May 4, 2013 at 5:36 am

    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.


    $(‘.my-list’).on(‘click’, ‘li’, function() {



    .active {
    background: whatever;

    # May 5, 2013 at 4:57 am

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

    $(document).ready(function () {
    $(“.optionstoggle”).click(function() {
    var toggletext = $(this).closest(“div”).find(“.options”);
    var txt =‘:visible’) ? ‘more’ : ‘less’;
    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?

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed