Question

I have put together a page which has a sidebar, when you click then menu in the sidebar it shows/hides divs.

http://www.prostatecymru.com/prostate/

The menu in the side is using this piece of code:

<div class="buttons">
    <ul id="menu-profile" class="menu">
        <li><a class="button" id="showdiv1">Show Div 1</a></li>
        <li><a class="button" id="showdiv2">Show Div 2</a></li>
        <li><a class="button" id="showdiv2">Show Div 2</a></li>
    </ul>
</div>

And the main content is using this code:

<div id="div1">
    Content Div 1
</div>
<div id="div2" style="display: none;">
    Content Div 2
</div>
<div id="div3" style="display: none;">
    Content Div 3
</div>

And the jQuery being used is:

<script type="text/javascript">
    $(function() {
        $('#showdiv1').click(function() {
            $('div[id^=div]').hide();
            $('#div1').show();
        });
        $('#showdiv2').click(function() {
            $('div[id^=div]').hide();
            $('#div2').show();
        });
        $('#showdiv3').click(function() {
            $('div[id^=div]').hide();
            $('#div3').show();
        });
    });
</script>

It does exactly as I want it to but one thing. I just want the a in the menu to be highlighted when the user has selected the section to show. My thought is to use .selected instead of .button on the selected item. I can set .selected for the first item which looks cool but I want when you change the the link for the .selected to move to the actually selected item. How can I do this. I have read a few guides but it isn’t exactly what I want or it doesn’t work.

I would really appreciate some help on this.

Thanks

Answer 1

Just use the same method that you are using to show/hide the divs:

$('#showdiv1').click(function() {
    $('div[id^=div]').hide();
    $('#div1').show();

    $('a[id^=showdiv]').removeClass('selected');
    $(this).addClass('selected');
});