Problem with slideUp/slidedown in a if statement -jQuery

I have a problem regarding accordion effect I want to make.

I would like to have following functionality - If you press anywhere in "div.post" the text surrounded in "p.read-more", which is hidden from start, slides down and reveal itself. Then to close it, you need to press "div.close".

I have tried something like this, but frankly, as you probably can see, I'm lost :-)

This is the HTML

<div class="post">
    <p>This is a beginning of a text.</p>
    <p class="read-more">... This is the rest of the text</p>
    <div class="close">This is a close button</div>
<开发者_高级运维/div>

I have tried something like this

$("p.read-more").hide();

$('div.post').click(function(){         
    $(this).toggleClass("active"); 
});

if( $('div.post').hasClass('active') ) {
    $('div.close').click(function(){
        $(this).find(".read-more").slideUp();        
    }); 

} else {
    $(this).click(function() {
        $(this).find(".read-more").slideDown();
    });
}

Thank you for any help.

---

EDIT

Sorry I misunderstood exactly what you wanted to happen:

I would like to have following functionality - If you press anywhere in "div.post" the text surrounded in "p.read-more", which is hidden from start, slides down and reveal itself. Then to close it, you need to press "div.close".

This click event basically says 'if div.post DOESN'T have the active class then slide down .read-more and add the active class to div.post'.

$('div.post').click(function () {
    if (!$(this).hasClass('active')) {
        $('p.read-more').slideDown();
        $(this).addClass('active');
    }
});

The div.close event is simple - there is no condition as if you fire the event when .read-more is already hidden nothing will happen anyway!

UPDATE

$('div.close').click(function() {
    $('p.read-more').slideUp('fast', function() {
        $('div.post').removeClass('active');
    );        
}

This should be all you need to achieve what you seek. And as another thought I would say don't hide the .read-more using jQuery just do it using CSS - that way you won't get a flicker when the page loads.

---

You're close. What's tripping you up here is the sequence of operations. Your if statement is run once when the script is parsed. You want your slide animations to run after a click event, so they need to be moved to the click handler.

$('div.post').click(function() {
    $(this).toggleClass("active");
    $(this).find(".read-more").slideDown();
});

And then modify your close click handler to look for its read-more to toggle

$('div.close').click(function(e) {
    $(this).siblings(".read-more").slideUp();

    e.stopPropagation();    // This prevents the div.post click from firing
});

Also, there is a syntax error in your html. Not sure if that's a typo or not. Your close div's end tag is missing.

---

<div class="post">
    <p>This is a beginning of a text.</p>
    <p class="read-more">... This is the rest of the text</p>
    <div class="close">This is a close button</div>
</div>

It looks like you're missing the closing div on the 4th line.

---

A simpler version of the jquery you can use is

$("p.read-more").hide();

$('div.post').click(function(){  
    if($(this).hasClass("active")) return; //exits function if this is already active

    $(".read-more").slideUp();   //causes all section to slide up
    $(this).find(".read-more").slideDown();  //causes only selected section to slide down
    $(".read-more").removeClass("active");    //removes active class from everything
    $(this).find(".read-more").addClass("active");  //sets active class to current item
});