Question

I have the following jQuery code:

$('#menu .selected').removeClass('selected');
      $('#homel').addClass('selected');
      $('#home').slideDown(150, function() {
        $('#public').slideUp(200);
        $('#login').slideUp(200);
        $('#faq').slideUp(200);

      });

Which, as you can guess, hides and shows div boxes. In that example #homel is the Home link, and #home is the home div. This looks ok, but if I want to add a new box, for example, #registerI have to add here and on every other box code (#public, #login and #faq) the code: $('#register').slideUp(200);
Is there any way that can be simplified and made generic for all?

EDIT: jsFiddle link for the example here

Answer 1

Here is a different solution. I gave all h3 divs a common class and select them with one selector. This way it’s you don’t have to change your code everytime you add another div. There is also a function for slideUp. Now all routes can use same function, no need for lots of anonymous functions.

This is the final result;

HTML

<div id="menu">
    <a href="./#/home" class="selected" id="homel">Home</a> <a href="./#/public" id="publicl">Public</a> <a href="./#/users/login" id="loginl">Login</a> <a href="./#/faq" id="faql">FAQ</a>
</div>
<div id="content">
    <div id="home" class="h3div">
        <h3>Welcome</h3>
    </div>
    <div id="public"class="h3div">
        <h3>Public</h3>
    </div>
    <div id="login"class="h3div">
        <h3>Login</h3>
    </div>
    <div id="register"class="h3div">
        <h3>Register</h3>
    </div>
    <div id="faq" class="h3div">
        <h3>Frequently Asked Questions</h3>
    </div>
</div>

Javascript

$(document).ready(function() {
    $.routes({
        '/': function() {
            $('#home').slideDown(200);
        },
        '/home': function() {
            menuSlideUpDown('home');
        },
        '/public': function() {
            menuSlideUpDown('public');
        },
        '/users/:what': function(params) {
            if (params.what == "login") {
                menuSlideUpDown('login');
            } else if (params.what == "register") {
                menuSlideUpDown('login');
            }
        },
        '/faq': function() {
            menuSlideUpDown('faq');
        }
    });
});

function menuSlideUpDown(item) {
    $('#menu a').removeClass('selected').filter('#' + item + 'l').addClass('selected');
    $('#' + item).slideDown(150, function() {
        $('.h3div').not(this).slideUp(150);
    });
}

And working example of final result is here.