Emulating a toggle button with JQuery and CSS
<p>I have a number of elements with the same class like this:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;&lt;title&gt;example&lt;/title&gt;
&lt;script type="text/javascript" src="jquery.js"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;ul&gt;
  &lt;li class="togglebutton"&gt;elem1&lt;/li&gt;
  &lt;li class="togglebutton"&gt;elem2&lt;/li&gt;
  &lt;li class="togglebutton selected"&gt;elem3&lt;/li&gt;
  &lt;li class="togglebutton"&gt;elem4&lt;/li&gt;
&lt;/ul&gt;
$(document).ready(function(){

});
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The selected element has a different color from the other elements. When a user clicks on ANOTHER element, I want that element to have the selected class - and all other elements should no longer have the selected class. In other words, only one element can be selected at any time.</p>

<p>I think I have worked out the logic, but I am not sure how to implement it using jQuery.</p>

<p>basically my approach would be:</p>

<p>(When an item is selected):</p>

<ol>
<li>Select all items using selector "ul > li.togglebutton"</li>
<li>remove class 'selected' from all of the items fetched in step 1</li>
<li>add class 'selected' to the current element that was clicked on.</li>
</ol>

<p>Is this logic correct, or is there a better way of going about it?</p>

<p>Also, how may I implement the above logic (assuming there is no better alternative), using jQuery?</p>
