click away to toggle a div

Question

i'm making a wordpress theme with a slide out search box. I would like to hide/toggle the search box by clicking away. Here is my javascript

jQuery(document).ready(function($){
    $("#flip").click(function(){
        $("#searchbox").toggle("slide", { direction: "right" }, 500);
    });

        $("#flip2").click(function(){
        $("#searchbox").toggle("slide", { direction: "right" }, 500);
    });

});


jQuery('body').on('click', function(e){
{
        $("#searchbox").toggle("slide", { direction: "right" }, 500);
});
jQuery('#searchbox').click(function(e)
{
   e.stopPropagation();
});

I get an unexpected token error when trying this. Thanks for your help

check this out. http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it — Prashanth Reddy, Apr 14 '17 at 08:09

Jalapeno Jack · Accepted Answer · 2017-04-14T13:48:01.960

this code should work-

jQuery(function() {

        jQuery('#flip').click(function() {
        jQuery("#searchbox").toggle("slide", { direction: "right" }, 500);
        return false;
    });
        });

jQuery(document).click(function() {
        jQuery("#searchbox").hide("slide", { direction: "right" }, 500);
 });

jQuery("#searchbox").click(function(e) {
    e.stopPropagation(); 
});

and here's a jsfiddle which I changed slightly for your purpose and for wordpress

score 0 · Answer 2 · answered Apr 14 '17 at 08:10

0

You could do it with a window.onclick event:
(You didn't post any HTML code so this is just an example of using it)

var yourbox = document.getElementById('yourbox');
window.onclick = function(event) {
    if (event.target == yourbox) yourbox.style.display = "none";
}

answered Apr 14 '17 at 08:10

NullDev

6,739
4
30
54

The Jquery code is functionally identical to this, once the syntax is fixed. – Shilly Apr 14 '17 at 08:24

score 0 · Answer 3 · answered Apr 14 '17 at 08:28

If this is the full code, the error is caused by the extra '{' character you have in this function:

jQuery('body').on('click', function(e){
{
    $("#searchbox").toggle("slide", { direction: "right" }, 500);
});

You should remove the extra {

jQuery('body').on('click', function(e){
    $("#searchbox").toggle("slide", { direction: "right" }, 500);
});

That said, this logic might not work for what you're trying to do, but this is probably the unexpected token error.

click away to toggle a div

3 Answers3