Question

I’m trying to create a dropdown kind of menu.So on clicking on a div menu fades in and on click again it fadesOut,
but fading out doesn’t seem to work properly…

$(document).ready(function(){

$('#clickable_div').click(function() {
var $somediv = $('#nav_menu');

    if($somediv.is(':visible')){

        $somediv.hide().fadeOut(300);
    }else{

        var $this = $(this);
        $('#nav_menu').css({
        display:'block',
            top: $this.offset().top + $this.height(),
            left: $this.offset().left,
            position: 'absolute'
        }).show();
    $('#nav_menu').hide().fadeIn(300);

 }
});


});

Answer 1

tried working on your script and below are the changes made by me.

$('#clickable_div').click(function() {
var $somediv = $('#nav_menu'); //you have passed the element in a variable so you can use this every where as per the need.

    if($somediv.is(':visible')){

        $somediv.fadeOut(700); // no need to use hide() function fadeOut() will do the needful for you. 
    }else{

        var $this = $(this);
        $somediv.css({ //you wrote $("#nav_div") not needed you can access the variable. unnecessary you will search the complete document to get the div again.
            top: $this.offset().top + $this.height(),
            left: $this.offset().left,
            position: 'absolute'
        }).fadeIn(700); // no need to use show() and display:block; this will be taken care by the fadeIn() function.


 }
});

EDIT: Check DEMO here jsfiddle