Grow your CSS skills. Land your dream job.

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](http://jsfiddle.net/rJzeN/1/ “JSfiddle”)

    # May 3, 2013 at 4:46 pm

    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.

    jQuery

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

    $(this).addClass(‘active’).siblings().removeClass(‘active’);
    });

    CSS

    .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 () {
    $(“.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?

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".