Question

Im having some menu objects, here “link1” and “link2” which I want to toggle some content (forms) on my webpage.

If form1 is visible and I click link2, I want form1 to close and form2 to open.

Relevant jQuery:

    $('#link1').click(function(){
        $('#form1:visible').hide();
        $('#form2:visible').hide();
        $('#form1:hidden').show();
    });

    $('#link2').click(function(){
        $('#form1:visible').hide();
        $('#form2:visible').hide();
        $('#form2:hidden').show();
    });

Question:
How can I make this simpler?

Answer 1

$('#link1').click(function(){
    $('#form2').hide();
    $('#form1').show();
});

$('#link2').click(function(){
    $('#form1').hide();
    $('#form2').show();
});

It hardly gets any simpler. If there’s any correlation between the link clicked and the form, like the 1 and 2 in the name, you could condense it into a single function that dynamically gets the right form and shows it… Whether that’s any simpler is debatable though:

$('#link1, #link2').click(function () {
    $('form').hide();
    $('#form' + this.id.substr(-1)).show();
});