Question

I would like to create the following but am not sure what would be the best way to go about it.

I want a vertical list of items on a web page.
Each item is click-able.
When the user click once one list item, I want to show that it has been selected (by showing a button image in the background. When the click the same item again or clicks any other list item, I want to remove that image and if another item was clicked, the selection image is shown behind that item.

Any suggestions?

Thanks

Answer 1

This is especially pleasurable to do in jQuery. Fiddle: http://jsfiddle.net/HgVmm/3/

HTML:

<ul id='items' class='selectable'>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

JS:

// For a single list to act independent of other lists:
$('ul.selectable li').live('click', function () {
    $(this).siblings('li.selected').removeClass('selected');
    $(this).toggleClass('selected');
});

// For all `selectable` lists to act together:
$('ul.selectable li').live('click', function () {
    $('li.selected').not(this).removeClass('selected');
    $(this).toggleClass('selected');
});

CSS:

ul.selectable li { cursor: pointer; }
ul.selectable li.selected { background: red; } /* Style to taste */