Skip to main content
11 of 12
added 186 characters in body
Jamal
  • 34.9k
  • 13
  • 133
  • 237

jQuery Dropdown Navigation

I've written some jQuery code that works, but I'm a novice in jQuery and I want to know how to improve my code if possible.

I know I have 3 near identical blocks of code. If I create a function, the code will be the same. I'm looking for more accurate code and am trying to reduce my code into fewer lines.

JSFiddle

    $('#click-me-idiomas').click(function () {
        var idiomasVisible = $("#menu-idiomas").is(":visible");
        var coleccionesVisible = $("#menu-colecciones").is(":visible");
        var nosotrosVisible = $("#menu-nosotros").is(":visible");
        if (coleccionesVisible || nosotrosVisible) {
            if (coleccionesVisible) {
                $('#click-me-colecciones').removeClass('active');
                $('#click-me-idiomas').addClass('active');
                $("#menu-colecciones").slideUp('slow', function () {
                    $('#menu-idiomas').slideToggle('slow');
                });
            }
            if (nosotrosVisible) {
                $('#click-me-nosotros').removeClass('active');
                $('#click-me-idiomas').addClass('active');
                $("#menu-nosotros").slideUp('slow', function () {
                    $('#menu-idiomas').slideToggle('slow');
                });
            }
        } else {
            if (idiomasVisible) {
                $("#menu-idiomas").slideToggle('slow', function () {
                    $('#click-me-idiomas').removeClass('active');
                });
            } else {
                $('#click-me-idiomas').addClass('active');
                $("#menu-idiomas").slideToggle('slow');
            }
        }

    });

    $('#click-me-colecciones').click(function () {
        var idiomasVisible = $("#menu-idiomas").is(":visible");
        var coleccionesVisible = $("#menu-colecciones").is(":visible");
        var nosotrosVisible = $("#menu-nosotros").is(":visible");
        if (idiomasVisible || nosotrosVisible) {
            if (idiomasVisible) {
                $('#click-me-idiomas').removeClass('active');
                $('#click-me-colecciones').addClass('active');
                $("#menu-idiomas").slideUp('slow', function () {
                    $('#menu-colecciones').slideToggle('slow');
                });
            }
            if (nosotrosVisible) {
                $('#click-me-nosotros').removeClass('active');
                $('#click-me-colecciones').addClass('active');
                $("#menu-nosotros").slideUp('slow', function () {
                    $('#menu-colecciones').slideToggle('slow');
                });
            }
        } else {
            if (coleccionesVisible) {
                $("#menu-colecciones").slideToggle('slow', function () {
                    $('#click-me-colecciones').removeClass('active');
                });
            } else {
                $('#click-me-colecciones').addClass('active');
                $("#menu-colecciones").slideToggle('slow');
            }
        }

    });

    $('#click-me-nosotros').click(function () {
        var idiomasVisible = $("#menu-idiomas").is(":visible");
        var coleccionesVisible = $("#menu-colecciones").is(":visible");
        var nosotrosVisible = $("#menu-nosotros").is(":visible");
        if (idiomasVisible || coleccionesVisible) {
            if (idiomasVisible) {
                $('#click-me-idiomas').removeClass('active');
                $('#click-me-nosotros').addClass('active');
                $("#menu-idiomas").slideUp('slow', function () {
                    $('#menu-nosotros').slideToggle('slow');
                });
            }
            if (coleccionesVisible) {
                $('#click-me-colecciones').removeClass('active');
                $('#click-me-nosotros').addClass('active');
                $("#menu-colecciones").slideUp('slow', function () {
                    $('#menu-nosotros').slideToggle('slow');
                });
            }
        } else {
            if (nosotrosVisible) {
                $("#menu-nosotros").slideToggle('slow', function () {
                    $('#click-me-nosotros').removeClass('active');
                });
            } else {
                $('#click-me-nosotros').addClass('active');
                $("#menu-nosotros").slideToggle('slow');
            }
        }

    });