Question

first post here at this great website!

I would like to reduce the amount of code for the following, espacially as there are more parts I need to add in the future – I’m sure there must be an easy way but I’m just not seeing it. Thanks for your help!

$(document).ready(function(){

    $(function(){
            $('#iqdrive').click(
                    function(){
                                    $('#iqdrive-cont').show();
                    });
    });
    $(function(){
            $('#optiwave').click(
                    function(){
                                    $('#optiwave-cont').show();
                    });
    });     
    $(function(){
            $('#vario').click(
                    function(){

                                    $('#vario-cont').show();
                    });
    });     
    $(function(){
            $('#autostain').click(
                    function(){
                                    $('#autostain-cont').show();
                    });
    });     
    $(function(){
            $('#autoload').click(
                    function(){
                                    $('#autoload-cont').show();
                    });

    });     

});

Answer 1

Firstly, you don’t need to nest document.ready functions (all the $(function() { are redundant as it is equivalent to document.ready). And to simplify your code:

$(function() {
    $('#iqdrive, #optiwave, #vario, #autostain, #autoload').click(function() {
        $('#' + this.id + '-cont').show();
    });
});