slideUp() and slideDown() does not work in jquery

Question

I have used slideDown and slideUp in the code. The slideDown is working fine but the slideUp is not working. Can somebody correct me. I am new to javascipt. I am not sure if I am doing the right thing.

<div class="footer">
<div class="holder">
    <a class="btn-site">
        <span>More Stuff</span>
    </a>
</div>              
<div class="menus">
    <ul class="menu-content">
        <li><a href="">Stuff1</a></li>
        <li><a href="">Stuff2</a></li>
        <li><a href="">Stuff3</a></li>
        <li><a href="">Stuff4</a></li>
    </ul>
</div>

Here is the script:

$('.btn-site').on('click',function() {  
    if($(this).closest('div').is(':visible')){  
        $('.menus').slideDown('slow');
        $('span').addClass('arrw_down');        
    }else{
        $('.menus').slideUp('fast');
        $('span').removeClass('arrw_down'); 
    }
});

Answer 1

Updated: If you want your SlideDown and slideUp to work try first one.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
$('.btn-site').on('click',function() {  
if($(this).parent().next("div").is(':visible')){  
	$(this).parent().next("div").slideUp('slow');
    $('span').addClass('arrw_down');        
}else{
	$(this).parent().next("div").slideDown('fast');
    $('span').removeClass('arrw_down');   
}
});
});

</script>

<div class="footer">
<div class="holder">
    <a class="btn-site">
        <span>More Stuff</span>
    </a>
</div>              
<div class="menus">
    <ul class="menu-content">
        <li><a href="">Stuff1</a></li>
        <li><a href="">Stuff2</a></li>
        <li><a href="">Stuff3</a></li>
        <li><a href="">Stuff4</a></li>
    </ul>
</div>

try this:$(this).closest('div') will return the .holder div but you need to get $(this).parent().next("div").is(':visible') for .menu div.try with show and hide.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.btn-site').on('click',function() {  
	//console.log($(this).parent().next("div").is(':visible'));
if($(this).parent().next("div").is(':visible')){  
    $('.menus').hide('slow');
    $('span').addClass('arrw_down');        
}else{
    $('.menus').show('fast');
    $('span').removeClass('arrw_down');   
}
});
});

</script>

<div class="footer">
<div class="holder">
    <a class="btn-site">
        <span>More Stuff</span>
    </a>
</div>              
<div class="menus">
    <ul class="menu-content">
        <li><a href="">Stuff1</a></li>
        <li><a href="">Stuff2</a></li>
        <li><a href="">Stuff3</a></li>
        <li><a href="">Stuff4</a></li>
    </ul>
</div>

another option can be using slideToggle like this:

$(document).ready(function(){
    $('.btn-site').on('click',function() {  
        $( ".menus" ).slideToggle( "slow", function() {
            if($('span').hasClass('arrw_down')){  
                $('span').removeClass('arrw_down');        
            }else{
                $('span').addClass('arrw_down');   
            }
        })
    });
});