javascript toggle button with css

Question

I have this toggle button in which when i click on it the button shows that it is active and the css changes so it is darker. but when i click the other button the toggle doesn't deactivate (on/off) i want to change that so that it turns on when i click on it and off when i click on the other button.

buttons

<div class="btn-group float_right">
    <a id="gridBtn" onclick="$.views.stuff.ToggleView('gridView')" title="View as grid" class="btn" href="#"><i class="icon-th-large"></i></a>
    <a id="listBtn" onclick="$.views.stuff.ToggleView('listView')" title="View as list" class="btn" href="#"><i class="icon-th-list"></i></a>
</div>

javascript

$(document).ready(function () {
        $('a#gridBtn').click(function () {
            $(this).toggleClass("down");
        });
        $('a#listBtn').click(function () {
            $(this).toggleClass("down");
        });
    });

One advice is to remove the onlick from your html and put them in the $("...).click part. — HMR
– HMR, Commented Apr 11, 2013 at 13:04

Niet the Dark Absol · Accepted Answer · 2013-04-11 13:00:32Z

3

Try this CSS trick:

<div class="btn-group float_right">
    <label>
        <input type="radio" name="viewbuttons" />
        <a id="gridBtn" .....>...</a>
    </label>
    <label>
        <input type="radio" name="viewbuttons" />
        <a id="listBtn" .....>...</a>
    </label>
</div>

Then add this CSS:

.btn-group input {display:none}
.btn-group a { /* your "deselected" styles here */ }
.btn-group input+a { /* your "selected" styles here */ }

This is extremely efficient since you don't need any jQuery to make it work ;)

answered Apr 11, 2013 at 13:00

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Masriyah Over a year ago

very handy i will give it a try and see how it works. Thanks for trick.

LeonardChallis Over a year ago

If you're not bothered about the semantics of your HTML that is.

billyonecan · Accepted Answer · 2013-04-11 13:26:58Z

2

You can give your #gridBtn the down class by using:

$('#gridBtn').addClass('down');

Also, there's no need for two separate click handlers:

  $('a#gridBtn, a#listBtn').click(function() {
    $(this).toggleClass('down').siblings().removeClass('down');
  });

Demo

edited Apr 11, 2013 at 13:26

answered Apr 11, 2013 at 13:21

billyonecan

20.3k9 gold badges44 silver badges66 bronze badges

2 Comments

Masriyah Over a year ago

is there a way to remove the hover feature from a button that has .addClass('down') to it?

billyonecan Over a year ago

It'd be better to do that using CSS, this question here should be able to help

Simon Martin · Accepted Answer · 2013-04-11 12:59:33Z

1

You need to set the state of the other button at the same time?

$(document).ready(function () {
    $('a#gridBtn').click(function () {
        $(this).toggleClass("down");
        $('a#listBtn').attr('class', 'up');
    });
    $('a#listBtn').click(function () {
        $(this).toggleClass("down");
        $('a#gridBtn').attr('class', 'up');
    });
});

answered Apr 11, 2013 at 12:59

Simon Martin

4,2317 gold badges60 silver badges95 bronze badges

2 Comments

Masriyah Over a year ago

This worked great with what i have. Is there a way to have a#gridBtn toggleClass down by default on page load because that is how it is displayed

Simon Martin Over a year ago

<a id="gridBtn" title="View as grid" class="btn down" href="#"> this will be changed by jquery when the click event happens

Collectives™ on Stack Overflow

javascript toggle button with css

3 Answers 3

2 Comments

Demo

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related