I cannot seem to get this. Everyone else examples or questions use different functions or are not variable height. In addition, they are all the same class so my other issue is adding id's to this mess....That being said Im very stuck. Ill take any advice I can get. Thank you for you help.
$(function(){
var slideHeight = 36; // px
var defHeight = $('.jswrap').height();
if(defHeight >= slideHeight){
$('.jswrap').css('height' , slideHeight + 'px');
$('.jsreadmore').append('<a href="#">Read More</a>');
$('.jsreadmore a').click(function(){
var curHeight = $('.jswrap').height();
if(curHeight == slideHeight){
$('.jswrap').animate({
height: defHeight
}, "normal");
$('.jsreadmore a').html('Close');
}else{
$('.jswrap').animate({
height: slideHeight
}, "normal");
$('.jsreadmore a').html('Read More');
}
return false;
});
}
});
Markup:
<div class="jscontainer">
<h4>title</h4>
<d开发者_Go百科iv class="jswrap">
<p>Content</p>
</div>
</div>
<div class="jscontainer">
<h4>title2</h4>
<div class="jswrap">
<p>Content</p>
</div>
</div>
here is the problem
Is this what you are trying to do: http://jsfiddle.net/5VdBk/?
Does it need to work with multiple slides?
Edit after noticed edit to question mentioning multiple slides:
Updated version which should handle multiple slides of varying content size http://jsfiddle.net/5VdBk/1/
Your code has a problem: defHeight is euqal to 20 and so the first if is always false and nothing happens because defHeight >= slideHeight is always false.
When you get that right you should not do this:
$('.jsreadmore a').click(function(){
but this
$('.jsreadmore a').live('click', (function(){
because the 'a' is appended after the dom is created and to bind events on newly created elements you need to use live
Look ath this basic fiddle http://jsfiddle.net/FmzBP/1/
精彩评论