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

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 :

    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!


    # January 24, 2013 at 11:08 am

    You can do something like this:

    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

    # 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

    This reply has been reported for inappropriate content.

    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

    # 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.

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

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed