Reputation: 125
I've run into somewhat of a wall with one of my jQuery lines to show and hide a dive. I'm using one link (read more...) to show the div and within the div toward the bottom I have a close link.
The show function works perfectly but the close function while closing the div does not animate slowly and causes the page scroll bar to go all the way to the top. I think it probably has to do with an error in the way I coded as I'm pretty new to jQuery. Any help would be appreciated.
I'm using jQuery version 1.6.4
jQuery code:
$(document).ready(function(){
$(".toggle_container").hide();
$("#standard_or_custom").hide();
$("a.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("a.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
$("a.close").click(function(){
$(".toggle_container").hide("slow,");
});
});
HTML:
<a href="#" class="trigger">Read more...</a>
<div class="toggle_container">
<p>
CONTENT HERE
</p>
<a href="#" class="close">Close</a>
</div>
CSS I'm using related to this div:
.toggle_container {
margin:0;
padding:10px 10px;
border: 1px solid #d6d6d6;
background: #f1f1f1;
overflow: hidden;
font-size:.95em;
clear: both;
}
.toggle_container .block {
padding: 20px;
}
.toggle_container .block p {
padding: 5px 0;
margin: 5px 0;
}
.bottom {
margin-bottom:20px;
}
Upvotes: 0
Views: 334
Reputation: 125
Nevermind, I figured it out; just added:
$("a.close").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
back in at the top of my close function and that took care it.
Complete code:
$(document).ready(function(){
$(".toggle_container").hide();
$("#standard_or_custom").hide();
$("a.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("a.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
$("a.close").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("a.close").click(function(){
$(".toggle_container").hide("slow");
});
});
Upvotes: 0
Reputation: 388316
There is a ,
at the end of slow
$(".toggle_container").hide("slow");
Demo: Fiddle
Upvotes: 6