NewB
NewB

Reputation: 125

JQuery show / hide div

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

Answers (2)

NewB
NewB

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

Arun P Johny
Arun P Johny

Reputation: 388316

There is a , at the end of slow

$(".toggle_container").hide("slow");

Demo: Fiddle

Upvotes: 6

Related Questions