JS Collapse

[freshbg1]

Здравейте, ако може да ми намерите кода който изпълнява това от тук http://web-tourist.net/forum/viewtopic.php?t=94860 обаче със jQuery и да се разпъва плавно +1 :?:

 

[misho]

С animate() може би.

 

[freshbg1]

по демото виждам че не е това което търся виж темата която съм постнал да видиш какво е. Искам да еъщото, но със jQuery, за да не отива страницата най-горе когато цъкна ПОКАЖИ ВСИЧКО и да се отваря плавно

 

[misho]

С aimate() мога да се променят само параметри с цифри, т.е. можеш да разшириш плавно полетно, но до някаква определена височина, но не и до auto. не знам защо, кото за дам 100% не е плавно. :lol:

Гледам функциите и не се сещам кое ще става. :idea:

 

[freshbg1]

някакъв друг скрипт? И със mootools става, няма значение какво ще използвате, важното е да става

 

[F1r3Fl3x]

Така става ли ? Не съм го тествал бързам малко
Скрипта използва jQuery

<script>
$(document).ready(function(){

    $('#expand').click(function(e){
        
        e.preventDefault();

        $('#container').animate({ 'height': $('#inner').outerHeight()+'px'}, 'slow');

    });

});
</script>

<a href="" id="expand">Expand</a> 
<div id="container" style="height:100px;">
    <div id="inner">
         // тук си слагаш текста :)
    </div>
</div>

 

[marian]

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var contHeights = new Array();
$(".cont").each(function(i) {
contHeights[i] = $(this).height();
$(this).attr("id","cont"+i);
$(this).css({overflow:"hidden",height:"100px"});
});
$(contHeights).each(function(i) {
$("#cont"+i).click(function() {
var el = this;
if ($(this).hasClass("expanded")) $(this).stop().animate({height:"100px"},"slow",function(){$(el).removeClass("expanded")});
else $(this).stop().animate({height:contHeights[i]},"slow",function(){$(el).addClass("expanded")});
});
});
});
</script>
<style type="text/css">.expanded{color:red}</style>
<div class="cont" style="width:150px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae ipsum neque, sed interdum sapien. Nam tempus luctus purus, sit amet bibendum metus iaculis vel. Vivamus mollis mauris a tortor cursus a ullamcorper diam posuere. Phasellus et adipiscing eros. Duis nec dictum lacus. Aliquam a orci eros. </div>
<div class="cont" style="width:150px">Mauris consectetur varius sollicitudin. Duis in lectus nisi, vel ornare nunc. Fusce rhoncus felis sed nulla ornare at viverra lectus egestas. Proin tincidunt dolor nec metus faucibus volutpat dictum arcu imperdiet. Curabitur condimentum augue vel nunc vestibulum varius. </div>

Ето ти с повече елементи и по-малко писане...

 

[freshbg1]

@marian - Това ми изглежда добро, има ли начин да се направи така, че да е прибрано по подразбиране полето, и да се цъка линк за да се отвори вмести самия текст? И също така като се разпъва height-а да е auto (т.е. да се разпъва докрай)

 

[marian]

Няма как да го анимирам да се разпъва до height:auto и без това се разпъва до началната височина, но неможеш да му променяш съдържанието и ид-то (задавам го със скрипта). Дива също неможе да е сгънат по същите причини. Не намерих друг начин да му взема височината, но ще го направя да се сгъва и разгъва с линк.

 

[marian]

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var contHeights = new Array();
$(".cont div").each(function(i) {
contHeights[i] = $(this).height();
$(this).attr("id","cont"+i);
$(this).css({overflow:"hidden",height:"100px"});
});
$(contHeights).each(function(i) {
$("#cont"+i).parent().children("a").click(function(e) {
e.preventDefault();
var elD = $(this).parent().children("div:first");
var elA = $(this).parent().children("a:first");
if (elD.hasClass("expanded")) elD.stop().animate({height:"100px"},"slow",function(){elD.removeClass("expanded");elA.text("Разгъни");});
else elD.stop().animate({height:contHeights[i]},"slow",function(){elD.addClass("expanded");elA.text("Сгъни");});
});
});
});
</script>
<div class="cont" style="width:150px">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae ipsum neque, sed interdum sapien. Nam tempus luctus purus, sit amet bibendum metus iaculis vel. Vivamus mollis mauris a tortor cursus a ullamcorper diam posuere. Phasellus et adipiscing eros. Duis nec dictum lacus. Aliquam a orci eros. </div>
<a href="#">Разгъни</a>
</div>
<div class="cont" style="width:150px">
<div>Mauris consectetur varius sollicitudin. Duis in lectus nisi, vel ornare nunc. Fusce rhoncus felis sed nulla ornare at viverra lectus egestas. Proin tincidunt dolor nec metus faucibus volutpat dictum arcu imperdiet. Curabitur condimentum augue vel nunc vestibulum varius. </div>
<a href="#">Разгъни</a>
</div>

Ето ти го и ако толкова много искаш height:auto можеш да си добавиш в цсс-а

.expanded{height:auto!important;}

 

[freshbg1]

идеално +1 :?: