CODEWITHSUNDEEP
jquery
3D-kreativ
3D-kreativ

Reputation: 9319

Close element that is visible with slideToggle from another button?

I have an element named #map-menu-container Inside this I have some buttons that are visible after you click on the slideToggle button named #map-menu-container-btn. With this button I open and close the container with the buttons.

But I wonder if it's possible in some way to slideToggle back(close) the container with all the buttons when a button is clicked? The buttons could all have some class that detects the click, but how could this then slide back the container?

The code below is the jQuery to handle the container.

    //Map menu
$("#map-menu-container-btn").click(function(){
    $("#map-menu-container").slideToggle("fast", function() {
        if ($(this).is(':visible')) {
            $("p#text-map-menu").text("hide map menu");
        } else {
            $("p#text-map-menu").text("show map menu");
        }
    });
});

Upvotes: 0

Views: 80

Answers (1)

Kevin F
Kevin F

Reputation: 2885

If I understand you correctly, you would just put the toggle in a separate function and call it from both click events.

(function($){
    var $mapMenuContainer = $("#map-menu-container");

    var toggleMenuContainer = function(){
        $mapMenuContainer.slideToggle("fast", function() {
            if ($(this).is(':visible')) {
                $("p#text-map-menu").text("hide map menu");
                //$("#map-menu-icon").attr("src","/images/bilderLayout/map-menu-btn-up.png")
            } else {
                $("p#text-map-menu").text("show map menu"); 
                //$("#map-menu-icon").attr("src","/images/bilderLayout/map-menu-btn-down.png")  
            }
        });
    };

    $("#map-menu-container-btn, .buttons").click(toggleMenuContainer);
})(jQuery);

Upvotes: 1

Related Questions