Simple jquery help, addClass + removeClass problem

JavaScript
1

Hi,

Take a look at this fiddle: http://jsfiddle.net/j5vZN/5/

Or this code/markup:

<ul>
    <li><button>hello</button></li>
    <li><button>world</button></li>
</ul>


ul{
    width: 200px;
}

li{
    display: block;
    float: left;
    width: 100%;
}

button{
    display: block;
    width: 100%;
    color: #000;
    padding: 10px;
    text-align: left;
    text-transform: uppercase;
    background: #eee;
    margin: 0;
    border: 0;
    outline: 0;
}

.selected{
    background: #555;
    color: #fff;
}


$('ul li button').on('click', function(){
	$(this).addClass('selected');
	$(this).siblings().removeClass('selected');
});

What I want to do is add the class “selected” on click of a button, and then remove it when i click the other button. I understand now I can’t use siblings, because well, they are not siblings. I guess it could be done with the <li> but how would i solve it with the buttons?

2

You can use toggleClass and removeClass - http://jsfiddle.net/j5vZN/6/