Revisions to Creating a menu

added comments to the code

Source Link

edited Jul 7, 2015 at 22:36

156
2
5

$(function(){
    var targets = ['background', 'colour', 'description', 'logo', 'products', 'links', 'contact']; // containers
    var $elements = $('#background, #colourscheme, #description, #logo, #products, #links, #contact'); // jQuery elements
    var i, x; // we use `i` for the array and `x` for the event selector
    for( i = 0, x = 1; i < targets.length; i++ ){
        $('#' + x + '_open').on('click', function(){
            $('#' + targets[i] + '_container').slideToggle((500, 'easeInOutExpo'), function(){
                var visible; // will store the name of the method (show/hide)
                if( !$(this).is(':visible') ){
                    $('#' + x + '_arrow').attr('src', './resources/images/icons/right.png');
                    visible = 'show';
                }
                else{
                    $('#' + x + '_arrow').attr('src', './resources/images/icons/left.png');
                    visible = 'hide';
                }
                    switch( x ){
  // since the code is (almost) the same to all elements, we finally use the method which name was stored in `visible` variable
                    case 1: visible == 'show' ? $elements.show() : $elements.not('#background').hide(); break;
  // this case is the only one that missmatch, so we use directly the method to show/hide
                    case 2: $elements.not('#colourscheme')[visible](); break;
  // the rest of cases had the same syntax so it is easy to solve
                    case 3: $elements.not('#description')[visible](); break;
                        case 4: $elements.not('#logo')[visible](); break;
                        case 5: $elements.not('#products')[visible](); break;
                        case 6: $elements.not('#contact')[visible](); break;
                        case 7: $elements.not('#links')[visible](); break;
                    }
                }
            });
        });
        x++;
    }
});

$(function(){
    var targets = ['background', 'colour', 'description', 'logo', 'products', 'links', 'contact']; // containers
    var $elements = $('#background, #colourscheme, #description, #logo, #products, #links, #contact'); // jQuery elements
    var i, x;
    for( i = 0, x = 1; i < targets.length; i++ ){
        $('#' + x + '_open').on('click', function(){
            $('#' + targets[i] + '_container').slideToggle((500, 'easeInOutExpo'), function(){
                var visible;
                if( !$(this).is(':visible') ){
                    $('#' + x + '_arrow').attr('src', './resources/images/icons/right.png');
                    visible = 'show';
                }
                else{
                    $('#' + x + '_arrow').attr('src', './resources/images/icons/left.png');
                    visible = 'hide';
                }
                    switch( x ){
                         case 1: visible == 'show' ? $elements.show() : $elements.not('#background').hide(); break;
                         case 2: $elements.not('#colourscheme')[visible](); break;
                         case 3: $elements.not('#description')[visible](); break;
                        case 4: $elements.not('#logo')[visible](); break;
                        case 5: $elements.not('#products')[visible](); break;
                        case 6: $elements.not('#contact')[visible](); break;
                        case 7: $elements.not('#links')[visible](); break;
                    }
                }
            });
        });
        x++;
    }
});

$(function(){
    var targets = ['background', 'colour', 'description', 'logo', 'products', 'links', 'contact']; // containers
    var $elements = $('#background, #colourscheme, #description, #logo, #products, #links, #contact'); // jQuery elements
    var i, x; // we use `i` for the array and `x` for the event selector
    for( i = 0, x = 1; i < targets.length; i++ ){
        $('#' + x + '_open').on('click', function(){
            $('#' + targets[i] + '_container').slideToggle((500, 'easeInOutExpo'), function(){
                var visible; // will store the name of the method (show/hide)
                if( !$(this).is(':visible') ){
                    $('#' + x + '_arrow').attr('src', './resources/images/icons/right.png');
                    visible = 'show';
                }
                else{
                    $('#' + x + '_arrow').attr('src', './resources/images/icons/left.png');
                    visible = 'hide';
                }
                switch( x ){ // since the code is (almost) the same to all elements, we finally use the method which name was stored in `visible` variable
                    case 1: visible == 'show' ? $elements.show() : $elements.not('#background').hide(); break; // this case is the only one that missmatch, so we use directly the method to show/hide
                    case 2: $elements.not('#colourscheme')[visible](); break; // the rest of cases had the same syntax so it is easy to solve
                    case 3: $elements.not('#description')[visible](); break;
                    case 4: $elements.not('#logo')[visible](); break;
                    case 5: $elements.not('#products')[visible](); break;
                    case 6: $elements.not('#contact')[visible](); break;
                    case 7: $elements.not('#links')[visible](); break;
                }
            });
        });
        x++;
    }
});

updated code instead add a new one improved

Source Link

edited Jul 7, 2015 at 22:00

kosmos

156
2
5

$(function(){
    var targets = ['background', 'colour', 'description', 'logo', 'products', 'links', 'contact']; // containers
    var $elements = $('#background, #colourscheme, #description, #logo, #products, #links, #contact'); // jQuery elements
    var i, x;
    for( i = 0, x = 1; i < targets.length; i++ ){
        $('#' + x + '_open').on('click', function(){
            $('#' + targets[i] + '_container').slideToggle((500, 'easeInOutExpo'), function(){
                var visible;
                if( !$(this).is(':visible') ){
                    $('#' + x + '_arrow').attr('src', './resources/images/icons/right.png');
                    switch( x ){
                        case 1:visible $elements.show();= break;'show';
                        case 2: $elements.not('#colourscheme').show(); break;}
                        case 3: $elements.not('#description').show(); break;else{
                        case 4: $elements.not('#logo').show$(); break;
                      '#' + casex 5:+ $elements.not('#products''_arrow').showattr(); break;
                        case 6:'src', $elements'.not('#contact')/resources/images/icons/left.show(png'); break;
                        case 7: $elements.not('#links').show(); break;
                  visible = }'hide';
                }
                else{
                    $switch('#' + x + '_arrow').attr('src', './resources/images/icons/left.png');{
                    switch( x ){
                  case 1: visible == 'show' ? case$elements.show() 1: $elements.not('#background').hide(); break;
                        case 2: $elements.not('#colourscheme').hide[visible](); break;
                        case 3: $elements.not('#description').hide[visible](); break;
                        case 4: $elements.not('#logo').hide[visible](); break;
                        case 5: $elements.not('#products').hide[visible](); break;
                        case 6: $elements.not('#contact').hide[visible](); break;
                        case 7: $elements.not('#links').hide[visible](); break;
                    }
                }
            });
        });
        x++;
    }
});

(Edit) Improved: just one switch:

$(function(){
    var targets = ['background', 'colour', 'description', 'logo', 'products', 'links', 'contact']; // containers
    var $elements = $('#background, #colourscheme, #description, #logo, #products, #links, #contact'); // jQuery elements
    var i, x;
    for( i = 0, x = 1; i < targets.length; i++ ){
        $('#' + x + '_open').on('click', function(){
            $('#' + targets[i] + '_container').slideToggle((500, 'easeInOutExpo'), function(){
                var visible;
                if( !$(this).is(':visible') ){
                    $('#' + x + '_arrow').attr('src', './resources/images/icons/right.png');
                    visible = 'show';
                }
                else{
                    $('#' + x + '_arrow').attr('src', './resources/images/icons/left.png');
                    visible = 'hide';
                }
                    switch( x ){
                        case 1: visible == 'show' ? $elements.show() : $elements.not('#background').hide(); break;
                        case 2: $elements.not('#colourscheme')[visible](); break;
                        case 3: $elements.not('#description')[visible](); break;
                        case 4: $elements.not('#logo')[visible](); break;
                        case 5: $elements.not('#products')[visible](); break;
                        case 6: $elements.not('#contact')[visible](); break;
                        case 7: $elements.not('#links')[visible](); break;
                    }
                }
               
            });
        });
        x++;
    }
});

$(function(){
    var targets = ['background', 'colour', 'description', 'logo', 'products', 'links', 'contact']; // containers
    var $elements = $('#background, #colourscheme, #description, #logo, #products, #links, #contact'); // jQuery elements
    var i, x;
    for( i = 0, x = 1; i < targets.length; i++ ){
        $('#' + x + '_open').on('click', function(){
            $('#' + targets[i] + '_container').slideToggle((500, 'easeInOutExpo'), function(){
                if( !$(this).is(':visible') ){
                    $('#' + x + '_arrow').attr('src', './resources/images/icons/right.png');
                    switch( x ){
                        case 1: $elements.show(); break;
                        case 2: $elements.not('#colourscheme').show(); break;
                        case 3: $elements.not('#description').show(); break;
                        case 4: $elements.not('#logo').show(); break;
                        case 5: $elements.not('#products').show(); break;
                        case 6: $elements.not('#contact').show(); break;
                        case 7: $elements.not('#links').show(); break;
                    }
                }
                else{
                    $('#' + x + '_arrow').attr('src', './resources/images/icons/left.png');
                    switch( x ){
                        case 1: $elements.not('#background').hide(); break;
                        case 2: $elements.not('#colourscheme').hide(); break;
                        case 3: $elements.not('#description').hide(); break;
                        case 4: $elements.not('#logo').hide(); break;
                        case 5: $elements.not('#products').hide(); break;
                        case 6: $elements.not('#contact').hide(); break;
                        case 7: $elements.not('#links').hide(); break;
                    }
                }
            });
        });
        x++;
    }
});

(Edit) Improved: just one switch:

$(function(){
    var targets = ['background', 'colour', 'description', 'logo', 'products', 'links', 'contact']; // containers
    var $elements = $('#background, #colourscheme, #description, #logo, #products, #links, #contact'); // jQuery elements
    var i, x;
    for( i = 0, x = 1; i < targets.length; i++ ){
        $('#' + x + '_open').on('click', function(){
            $('#' + targets[i] + '_container').slideToggle((500, 'easeInOutExpo'), function(){
                var visible;
                if( !$(this).is(':visible') ){
                    $('#' + x + '_arrow').attr('src', './resources/images/icons/right.png');
                    visible = 'show';
                }
                else{
                    $('#' + x + '_arrow').attr('src', './resources/images/icons/left.png');
                    visible = 'hide';
                }
                    switch( x ){
                        case 1: visible == 'show' ? $elements.show() : $elements.not('#background').hide(); break;
                        case 2: $elements.not('#colourscheme')[visible](); break;
                        case 3: $elements.not('#description')[visible](); break;
                        case 4: $elements.not('#logo')[visible](); break;
                        case 5: $elements.not('#products')[visible](); break;
                        case 6: $elements.not('#contact')[visible](); break;
                        case 7: $elements.not('#links')[visible](); break;
                    }
                }
               
            });
        });
        x++;
    }
});

$(function(){
    var targets = ['background', 'colour', 'description', 'logo', 'products', 'links', 'contact']; // containers
    var $elements = $('#background, #colourscheme, #description, #logo, #products, #links, #contact'); // jQuery elements
    var i, x;
    for( i = 0, x = 1; i < targets.length; i++ ){
        $('#' + x + '_open').on('click', function(){
            $('#' + targets[i] + '_container').slideToggle((500, 'easeInOutExpo'), function(){
                var visible;
                if( !$(this).is(':visible') ){
                    $('#' + x + '_arrow').attr('src', './resources/images/icons/right.png');
                    visible = 'show';
                }
                else{
                    $('#' + x + '_arrow').attr('src', './resources/images/icons/left.png');
                    visible = 'hide';
                }
                    switch( x ){
                        case 1: visible == 'show' ? $elements.show() : $elements.not('#background').hide(); break;
                        case 2: $elements.not('#colourscheme')[visible](); break;
                        case 3: $elements.not('#description')[visible](); break;
                        case 4: $elements.not('#logo')[visible](); break;
                        case 5: $elements.not('#products')[visible](); break;
                        case 6: $elements.not('#contact')[visible](); break;
                        case 7: $elements.not('#links')[visible](); break;
                    }
                }
            });
        });
        x++;
    }
});

Added new improved code

Source Link

edited Jul 7, 2015 at 20:49

kosmos

156
2
5

(Edit) Improved: just one switch:

$(function(){
    var targets = ['background', 'colour', 'description', 'logo', 'products', 'links', 'contact']; // containers
    var $elements = $('#background, #colourscheme, #description, #logo, #products, #links, #contact'); // jQuery elements
    var i, x;
    for( i = 0, x = 1; i < targets.length; i++ ){
        $('#' + x + '_open').on('click', function(){
            $('#' + targets[i] + '_container').slideToggle((500, 'easeInOutExpo'), function(){
                var visible;
                if( !$(this).is(':visible') ){
                    $('#' + x + '_arrow').attr('src', './resources/images/icons/right.png');
                    visible = 'show';
                }
                else{
                    $('#' + x + '_arrow').attr('src', './resources/images/icons/left.png');
                    visible = 'hide';
                }
                    switch( x ){
                        case 1: visible == 'show' ? $elements.show() : $elements.not('#background').hide(); break;
                        case 2: $elements.not('#colourscheme')[visible](); break;
                        case 3: $elements.not('#description')[visible](); break;
                        case 4: $elements.not('#logo')[visible](); break;
                        case 5: $elements.not('#products')[visible](); break;
                        case 6: $elements.not('#contact')[visible](); break;
                        case 7: $elements.not('#links')[visible](); break;
                    }
                }
               
            });
        });
        x++;
    }
});

(Edit) Improved: just one switch:

$(function(){
    var targets = ['background', 'colour', 'description', 'logo', 'products', 'links', 'contact']; // containers
    var $elements = $('#background, #colourscheme, #description, #logo, #products, #links, #contact'); // jQuery elements
    var i, x;
    for( i = 0, x = 1; i < targets.length; i++ ){
        $('#' + x + '_open').on('click', function(){
            $('#' + targets[i] + '_container').slideToggle((500, 'easeInOutExpo'), function(){
                var visible;
                if( !$(this).is(':visible') ){
                    $('#' + x + '_arrow').attr('src', './resources/images/icons/right.png');
                    visible = 'show';
                }
                else{
                    $('#' + x + '_arrow').attr('src', './resources/images/icons/left.png');
                    visible = 'hide';
                }
                    switch( x ){
                        case 1: visible == 'show' ? $elements.show() : $elements.not('#background').hide(); break;
                        case 2: $elements.not('#colourscheme')[visible](); break;
                        case 3: $elements.not('#description')[visible](); break;
                        case 4: $elements.not('#logo')[visible](); break;
                        case 5: $elements.not('#products')[visible](); break;
                        case 6: $elements.not('#contact')[visible](); break;
                        case 7: $elements.not('#links')[visible](); break;
                    }
                }
               
            });
        });
        x++;
    }
});

added 15 characters in body

Source Link

edited Jul 7, 2015 at 20:34

kosmos

156
2
5

Loading

Source Link

created Jul 7, 2015 at 20:28

kosmos

156
2
5

Loading

Stack Exchange Network

Return to Answer