Grow your CSS skills. Land your dream job.

How can I create a toggle with icons?

  • # January 24, 2013 at 10:21 am

    Hello to everyone!

    Guys, I have created this toggle with jquery library :

    http://jsfiddle.net/b59Su/

    Now the problem is I can’t change those + and – texts with icons.

    and I also want to have a different style for current item (which is selected)

    How can I do that?

    thanks in advance!

    Alireza.M

    # January 24, 2013 at 11:08 am

    You can do something like this: http://jsfiddle.net/b59Su/6/

    The next thing you’ll have to try to figure out is how to stop the users from double-clicking and having the color disappear!

    # January 24, 2013 at 1:25 pm

    Here is how you can do it http://codepen.io/gitchandu/pen/moBKj

    # January 24, 2013 at 5:12 pm

    Thank you very much greenrobo!

    It was exactly what I want.

    # January 24, 2013 at 7:20 pm

    dear greenrobo!

    You have used 2 images for plus and minus signs with “center right” positions.

    What about 1 spritesheet?

    If I want to use 1 spritesheet for those signs how I should change the positions?

    # January 24, 2013 at 9:43 pm

    I made it super quick and then realized when I finished I totally could have used a psuedo element instead of adding the extra markup. :/

    I might fix it later. ;x

    http://codepen.io/scottnix/pen/aGczs

    # January 24, 2013 at 10:04 pm

    Thank you scottnix!

    I used the code and got the result as I wished.

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

You must be logged in to reply to this topic.

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