Аккордеослайдер - аккордеон со слайдером контента

Понадобился как-то аккордеон с прокруткой контента по стрелкам. Ничего близко подходящего к решению проблемы не нашел, пришлось набросать мини-плагин.
JS код

// JavaScript Document

//Определяем код плагина
(function($){

$.fn.accordeoslider = function() {

this.each(function() {
var fullheight = 0;
var visible_li = 3;
li_height = 0;
accordeon = $(this);
containers = $(this).find('.container').get();
$(containers).each(function(index, element) {
container = $(this);
var li = $(this).find('li').get();
li_count = li.length;
$(this).parent('ul').children('a.up').hide();
var i =0;
contents = container.find('.content');
if (li_count <= visible_li ) {
container.parent('ul').children('a.down').hide();
}
$(li).each(function(index, element) {
i++;
if ( i <= visible_li ) {
fullheight += $(this).height();
if ($(li).length >= visible_li) {
fullheight +=parseInt($(this).css('border-top-width')) + parseInt($(this).css('border-bottom-width'));
}
}
if ( i == 1 ) {
li_height = $(this).height();
}
});
$(this).height(fullheight);
fullheight = 0;
});

accordeon.find('ul:visible').hide();
accordeon.find('.element').click(function(e) {
accordeon.find('ul:visible').slideUp();
ul = $(this).parent('li').children('ul');
$container = ul.children('.container');
if (ul.css('display') == 'none') {
ul.children('a.down').css('top', $container.height() - 30);
ul.slideDown();
} else {
ul.slideUp();
}
return false;
});
$('a.down').click(function(e) {
$licontent = $(this).parent('ul').children('.container').children('.content');
if ($licontent.hasClass('active')) {
return false;
}
$licontent.css('position','absolute');
$button = $(this);
$parentheight = $licontent.parent('.container').height();
if ($licontent.position().top <= ( $parentheight - $licontent.height())) {
$button.fadeOut(200);
$licontent.stop();
return false;
}
$licontent.addClass('active');
$licontent.animate({'top':"-="+li_height+"px"},function() {
if ($licontent.position().top <= ( $parentheight - $licontent.height()) ) {
$button.fadeOut(200);
$licontent.stop();
}
$licontent.removeClass('active');
}).queue(false);
if ($licontent.position().top >= ( $parentheight - $licontent.height()) ) {
$button.prev('a.up').fadeIn(200);
}
return false;
});
$('a.up').click(function(e) {
$licontent = $(this).parent('ul').children('.container').children('.content');
if ($licontent.hasClass('active')) {
return false;
}
$licontent.css('position','absolute');
$button = $(this);
$parentheight = $licontent.parent('.container').height();
if ($licontent.position().top >= 0 ) {
$licontent.stop();
$button.fadeOut(200);
return false;
}
$licontent.addClass('active');
$licontent.animate({'top':"+="+li_height+"px"},function() {
if ($licontent.position().top >= 0 ) {
$button.fadeOut(200);
$licontent.stop();
}
$licontent.removeClass('active');
}).queue(false);
if ($parentheight < $licontent.height() ) {
$button.next('a.down').fadeIn(200);
}
return false;
});
});

return this;
// Код плагина
};
})(jQuery);


$(document).ready(function(){

});

HTML код

<script>
$(document).ready(function(){
$('.accordeon').rotablemenu();
});
</script>
<div class="accordeon">
<li>
<a class="element" href="#">Первый</a>
<ul style="position:relative; width:200px;">
<a href="#" class="up">up</a>
<a href="#" class="down">down</a>
<div style="position:relative;" class="container">
<div class="content">
<li><a>Первый пункт</a></li>
<li><a>Второй пункт</a></li>
<li><a>Третий пункт<br/>большущий</a></li>
</div>
</div>
</ul>
</li>
<li>
<a class="element" href="#">Второй</a>
<ul style="position:relative; width:200px;">
<a href="#" class="up">up</a>
<a href="#" class="down">down</a>
<div style="position:relative;" class="container">
<div class="content">
<li><a>Первый пункт</a></li>
<li><a>Второй пункт</a></li>
<li><a>Третий пункт<br/>большущий</a></li>
<li><a>Четвертый пункт</a></li>
<li><a>Пятый пункт<br/>большущий</a></li>
</div>
</div>
</ul>
</li>
<li>
<a class="element" href="#">Третий</a>
<ul style="position:relative; width:200px;">
<a href="#" class="up">up</a>
<a href="#" class="down">down</a>
<div style="position:relative;" class="container">
<div class="content">
<li><a>Первый пункт</a></li>
<li><a>Второй пункт</a></li>
<li><a>Третий пункт<br/>большущий</a></li>
<li><a>Четвертый пункт</a></li>
<li><a>Пятый пункт<br/>большущий</a></li>
<li><a>Шестой пункт</a></li>
</div>
</div>
</ul>
</li>
</div>

CSS код:

.accordeon li { list-style: none;}
.accordeon .container { overflow:hidden; }
.accordeon a.up { position:absolute; right:2px; top:2px; z-index:100;}
.accordeon a.down { position:absolute; right:2px; bottom:2px; z-index:100;}

28.01.2013, 888 просмотров.