Two clicks to get value of LI Item in jQuery - Should take 1
<p>I have a jQuery issue.</p>

<p>I have a HTML list setup as follows : </p>

<pre><code>&lt;ul class="areas"&gt;
 &lt;li title="Volunteering"&gt;Volunteering&lt;/li&gt;
 &lt;li title="Partnership &amp;amp; Support"&gt;Partnership &amp;amp; Support&lt;/li&gt;
 &lt;li title="Business Services"&gt;Business Services&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>When the user clicks the outer div - styled select, I then filter through these items and add the title to a span.</p>

<p>The problem I have is, That it is taking two clicks for the "Volunteering" to appear in the span.</p>

<p>I have mocked up a <a href="http://jsfiddle.net/355Qk/" rel="nofollow">jsFiddle</a> of this</p>

<p>My jQuery looks like this :</p>

<pre><code>$('ul.areas').css('display', 'none');

$('.styled-select').click(function()
{
    var cur = $('.areas li.current');
    next = cur.next('li');

    var value = cur.attr('title');

    if (next.length === 0) {  // wrap if necessary
        next = $('.areas li:first');
    }

    cur.removeClass('current');  // move the current class
    next.addClass('current');

    $('.service-area').html(value);
})
</code></pre>

<p>How can I get it to work in just one click instead of two?</p>

<p>Thanks in advance.</p>
