CODEWITHSUNDEEP
jquery
Viktor
Viktor

Reputation: 722

Jquery slideUp not working

slideUp is not working when clicking on div object.

Jquery code:

$('#show-about-btn').click(function() {
    $('#show-about-btn').html("▼");
    if($('.menu-nav').css('display')=='none') {
        $('.menu-nav').slideDown("fast").show();
    } else {
        $('.menu-nav').slideUp().hide();
        $('#show-about-btn').html("▲");
    }
});

Full code is here: Jsfiddle

Upvotes: 2

Views: 363

Answers (3)

Yogesh Sharma
Yogesh Sharma

Reputation: 2017

Please check below code, I think it's working - 

$('#show-about-btn').click(function() {
	$('#show-about-btn').html("▼");
	if($('.menu-nav').css('display')=='none') {
		$('.menu-nav').slideDown();
	} else {
		$('.menu-nav').slideUp();
		$('#show-about-btn').html("▲");
	}
});
.subnav li {
	list-style: none;
	float: left;
	padding: 1px 60px 1px 1px;
}

.subnav {
	max-width: 600px;
	height: 50px;
	line-height: 3em;
	border-bottom: 1px solid #ccc;
}

.tab{
	position: relative;
	top: 25px;
	width: 600px;
}

.menu-nav {
	display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href="#"><h1 class="title">Link</a><a href="#" id="show-about-btn">&#9650;</a></h1>

<div class="menu-nav">	
					<nav class="subnav">
						<ul class="tabs">
							<li><a href="#portfolio" class="active">Portfolio</a></li>
							<li><a href="#about_us">About Us</a></li>
							<li><a href="#contact_us">Contact Us</a></li>
						</ul>	
					</nav>

		<div class="sub-content">		
			<article>
				<div class="tab" id="portfolio">
					<p>1.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, nisi quidem saepe, minus qui amet officiis voluptatum odio maiores sunt blanditiis nostrum eum. Animi placeat aut magni, quo magnam harum.</p>
				</div>

				<div class="tab" id="about_us">
					<p>2.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, nisi quidem saepe, minus qui amet officiis voluptatum odio maiores sunt blanditiis nostrum eum. Animi placeat aut magni, quo magnam harum.</p>
				</div>

				<div class="tab" id="contact_us">
					<p>3.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, nisi quidem saepe, minus qui amet officiis voluptatum odio maiores sunt blanditiis nostrum eum. Animi placeat aut magni, quo magnam harum.</p>
				</div>
			</article>
		</div>	
	</div>

Upvotes: 0

tetta
tetta

Reputation: 445

There is no need in show and hide methods. Remove it. 

if($('.menu-nav').css('display')=='none') {
    $('.menu-nav').slideDown();
} else {
    $('.menu-nav').slideUp();
    $('#show-about-btn').html("&#9650;");
}

Jsfiddle

Upvotes: 0

Amit
Amit

Reputation: 46361

You don't need to .show() and .hide() when you .slideDown() and .slideUp().

$('#show-about-btn').click(function() {
    $('#show-about-btn').html("&#9660;");
    if($('.menu-nav').css('display')=='none') {
        $('.menu-nav').slideDown();
    } else {
        $('.menu-nav').slideUp();
        $('#show-about-btn').html("&#9650;");
    }
});

Fixed fiddle.

Upvotes: 1

Related Questions