У меня есть скрытый раздел в моем HTML, который отображается и скрывается при нажатии кнопки с помощью функции JQuery 'slideToggle'.
Эта кнопка находится ниже скрытого содержимого и успешно анимируется во всех браузерах, кроме ie7, есть ли способ заставить ее анимироваться без необходимости перезаписывать кнопку, чтобы она не позиционировалась абсолютно?
<div class="hiddenContent">
<p>Hidden content is in here</p>
</div>
<div class="showmorecontainer">
<a class="showmore" href="#">SHOW</a>
</div>
Спасибо
Я добавил немного CSS и JQuery для контекста (обратите внимание, что приведенный выше HTML был упрощен)
CSS -
.showmorecontainer {
высота: 24px;
} * +1010 *
.showmore{
position:absolute;
left:0px;
bottom:0px;
height:22px;
background-image:url('../images/showmore.png');
background-repeat:no-repeat;
width:330px;
display:block;
padding-left:195px;
padding-top:2px;
}
JQuery -
$(".showmore").click(function(e) {
$(this).parent().parent().find('.hiddenContent').slideToggle('slow', function() {
if($(this).is(":hidden")){
$(this).parent().find('.showmore').html('SHOW ME MORE');
$(this).parent().find('.arrow').removeClass('arrowup');
}
else{
$(this).parent().find('.showmore').html('CLOSE BACK UP');
$(this).parent().find('.arrow').addClass('arrowup');
}
});
e.preventDefault();
});