CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Zee
Zee

Reputation: 161

How to hide a div on click of another dropdown link?

I have a bootstrap navigation menu where I have also added a search icon. The search icon shows up the search box on click. Added a toggle in the search icon to show and hide the search box.

Now, when I click on the search icon and it is it open state showing the search box and then I click on any one of the dropdown menu in the navigation menu the dropdown appears over the search box.

I need to close the search box once any other dropdown menu is clicked. I know its very simple but but not getting a proper solution. Can anyone suggest?

Here is the link of the code: JSFiddle 

$('.tablet-toggle a').click(function (e) {
if($('ul.dropdown-menu.tablet-toggle').css('display') == 'block'){
    $('.desktop-search').hide();
}

});

$(".search-icon").click(function () {
    $("#searchForm form").slideToggle("fast", function() {
        // Animation complete.
    });
});

Upvotes: 0

Views: 717

Answers (4)

Rama Rao M
Rama Rao M

Reputation: 3051

You may try this: This will close the search box if click happens any other place of the page but on search icon:

<script>
$(document).ready(function(){
   $(document).on('click',function(){
      $('.desktop-search').hide();
   });
});
</script>

Make sure that on Search Box open event the following line should be written:

event.stopPropagation();

Upvotes: 0

Tom Lau
Tom Lau

Reputation: 56

You may try the following code:

Hide the search form when any dropdown menu in the navbar is clicked.

$('.navbar a.dropdown-toggle').click(function (e) {
    // Use slideUp here to consist the animation behavior with slideToggle
    $('#searchForm form').slideUp('fast'); 
});

Upvotes: 1

Qarib Haider
Qarib Haider

Reputation: 4906

Check this out, updated Fiddle:
http://jsfiddle.net/uw08ddmm/7/

$('a.dropdown-toggle').click(function (e) {
    $('.desktop-search').toggle();
});

Upvotes: 2

Emre T&#252;rkiş
Emre T&#252;rkiş

Reputation: 1002

Have you tried this?

window.onload = function(){
    $('.nav li.dropdown').click(function(){
        $('.desktop-search').hide();
    });
};

Upvotes: 0

Related Questions