CODEWITHSUNDEEP
jquerycsstoggleclass
user2212564
user2212564

Reputation: 261

ToggleClass with checkbox labels

I have a list of labels that when clicked, jQuery toggles the class on and off.

On each label there will be a different icon relating to what it is say in black. When the class is activated to say it's selected, a grey arrow overlays the label. What i need is to change the icon from black to white and this is where i am having problems.

Here is a quick jsfiddle for example: http://jsfiddle.net/vvvRX/

In my jQuery toggle, it toggles the active class called active but this is has the plain gray arrow on, how would i get it to show the gray arrow and the white icon for each label?

Would i have to do an if statement for each one instead of $(this) ?

Seems to be too many div's and classes floating about so i know there must be a solution to this!

Thanks.

Upvotes: 0

Views: 324

Answers (2)

Alvaro
Alvaro

Reputation: 41595

Well... you will need a white icon first of all :)

Then just add the following style for the active status:

.university.active{ 
    color:white; 
    margin-left:-12px;
    background: url('URL_WITH_WHITE_ICON') 210px center no-repeat;  
}

Living example: http://jsfiddle.net/vvvRX/1/ (for the 2nd button)

Also, be careful, you are using the id padding more than once... it should be a class.

UPDATE

If you want to keep the both backgrounds at the same time, then you are in trouble. You would need to make use of :before or :after properties, which are not supported by older versions of many browsers.

Position relative for your labels: label { color:#40403e; background:#dbdcd4; position:relative; }

And the :after style with the new background:

.university.active:after{ 
    content:'';
    position: absolute;
    z-index:3;
    color:white; 
    right:-12px;
    top:-2px;
    background: url('http://www.maxwellplan.com/fw/img/university-check-icon-white.png') 210px center no-repeat ;   
    width:100%;
    height:100%;
}

Living example: http://jsfiddle.net/vvvRX/3/

UPDATE 2

Your main problem is your HTML code. It would be much more simple if you just had it properly created. For example, using a list for the items and adding an span element for the icon at the right. Then you could work separately with the list background or the span background for the active state.

Well, I am not gonna explain you everything but just take a look at how things should have been done:

http://jsfiddle.net/vvvRX/4/

Upvotes: 1

Corion
Corion

Reputation: 663

You cannot set the background of an object to two different images.

If you want the icon to change on click, you can create a separate div to display the icon.

CSS: 

.labelItem .icon {
    margin-top: -6px;
    margin-right: 15px;
    float: right;
    width: 30px;
    height: 30px;
}

#iconUniversity {
    background: url('http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/32/Business-Graduation-cap-icon.png') no-repeat;
}

.active #iconUniversity {
    background: url('http://www.maxwellplan.com/fw/img/university-check-icon-white.png') no-repeat;
}

HTML:

    <input type="checkbox" id="university" class="checkbox" />
    <div class="labelItem">
        <label for="university">University</label>
        <div id="iconUniversity" class="icon">&nbsp;</div>
    </div>

Here is a working example: http://jsfiddle.net/f8hVn/2/

You also seem to have the concepts of id and class confused. The id should be unique - you'd use the id if you need to differentiate between different objects of the same class. A class is something you should assign to multiple objects that you want to look the same. Objects can have more than one class, but only one id.

In this example, you should use a class for all of the bits and the backgrounds that are shared between the items. You should use an id for the icons which need to be different for each item.

Upvotes: 1

Related Questions