How to change div height on slideToggle function with more/less

问题

How can I update my code, so I can change <div> height with slideToggle(), now it's almost correct, but when I click on one "read_more" and click to another it's not right. I need when is slideDown to show hidden p and change the main <div> to specific height and when is slideUp to hide this p and change the <div> previous specific height ("... Read More" base .main height, "... Read Less" new .main height).

Please see demo or code below.

HTML

<div class="main">
    <!-- === h1 === -->
    <h1>Lorem ipsum dolor sit amet</h1>
        <p>Ut enim ad minim veniam, quis nostrud exercitation.</p>
        <p class="more">Duis aute irure dolor in reprehenderit in voluptate.</p>
        <a class="read_more">... Read More</a>
    <!-- === h2 === -->             
    <h2>Consectetur adipisicing elit</h2>
        <p>On the other hand, we denounce with righteous.</p>
        <p class="more">Gemoralized by the charms of pleasure of the moment.</p>
        <a class="read_more">... Read More</a> 
    <!-- === h3 === -->                  
    <h3>Sed do eiusmod tempor incididunt</h3>
        <p>The wise man therefore always holds.</p>
        <p class="more">Et harum quidem rerum facilis est et expedita distinctio.</p>
        <a class="read_more">... Read More</a>
</div>

CSS

.main {
    border:1px solid blue;
    height: 260px;
    padding: 5px;
}
h1,h2,h3 {
    font-size: 18px;
    color: #96bc33;
}
p {
    margin: 0;
    font-size: 13px;
}
.more {
    display:none;
}
.read_more {
    cursor: pointer;
    color: red;
}

JavaScript

var rm = $(".read_more"),
    moreText = "... Read More",
    lessText = "... Read Less",
    i = 0 ;

rm.click(function () {
    var $this = $(this);
    rm.not($this).text(moreText).prev(".more").slideUp();
    $this.text($this.text() == moreText ? lessText : moreText).prev(".more").slideToggle("normal");
    $(".main").animate({height:(++i % 2) ? 280 : 260}, "normal");   
});

回答1:

I've upgraded your jsFiddle:

http://jsfiddle.net/GwkQN/

The changes that were done are:

removed the height attribute from your main container
refactored your script for rm.click

I'm not sure if your code did something else apart from the slideToggle, but this one-liner probably does everything that you need.

$(this).prev('.more').slideToggle();

Changed jQuery code:

var rm = $(".read_more"),
moreText = "... Read More",
lessText = "... Read Less";

rm.click(function () {

    $(this).prev('.more').slideToggle();

    if($(this).text()==moreText){
        $(this).text(lessText);
    }else{
        $(this).text(moreText);
    }

});

Changed CSS:

.main {
    border:1px solid blue;
    padding: 5px;
}

回答2:

if you need specific height you can use css propertie: min-height: 260px;

.main {
    border:1px solid blue;
    padding: 5px;
     min-height: 260px;
}

var rm = $(".read_more"),
    moreText = "... Read More",
    lessText = "... Read Less";

rm.click(function () {
    var $this = $(this);
    rm.not($this).text(moreText).prev(".more").slideUp();
   $this.text($this.text() == moreText ? lessText : moreText).prev(".more").slideToggle("normal");
});

FIDDLE

回答3:

try this,

jsfiddle.net/4MfLw/8/

I have updated your code

I have removed "height" attribute from your css of "main" class Also I have commented your code of animation and I have written the code to slide up all the other "more" div if they are open

来源：https://stackoverflow.com/questions/21910896/how-to-change-div-height-on-slidetoggle-function-with-more-less

标签

javascript

jquery

show-hide

slidetoggle