Simulate this slider effect with jquery (instead of mootools) [Horizontal accordion effect]

Question

I can use javascript and everything else, but before reinventing the wheel, I would like to know if there is already a similar plugin for jquery because I would like to use that framework and not mootools.

I don't have problems with money, expecially for a 5€ template, but really I would like to use jquery because I studied it and not mootools.

The template: http://www.globbersthemes.com/demo/upsilum/

EDIT 1: I changed the title for future references for people that know the correct name of this type of effect, thanks to everyone.

Answer 1

我一直很喜欢这个的jquery工具标签-参见http://flowplayer.org/tools/demos/tabs/accordion-horizo​​ntal.html

Answer 2

这里是您可能感兴趣的插件： http : //www.portalzine.de/Horizo​​ntal_Accordion_Plugin_2/index.html

Answer 3

Here, I reinvented the wheel. But had looot of fun! :)
Tested in all modern browsers + IE 6-7-8

• Instead of using 'title' images now you can use classic editable text!
• Set desired 'start' tab

---

EDIT: added/fixed title support (rotaion for IE 6-7-8)

H - ACCORDION DEMO

The simple HTML:

<div id="acc">

        <div class="title"><p class="button">Title 1</p></div>
        <div class="cont">Cont 1</div>   

        <div class="title"><p class="button">Title 2</p></div>
        <div class="cont">Cont 2</div>   

        <!-- more tabs here.... -->
</div>

The CSS style Ex:

.title{
    cursor:pointer;
    position:relative;
    float:left;
    width:20px;
    height:200px;
    background:#444;
    color:#ccc;
    padding:15px;
    border-left:3px solid #aaa;
}
.cont{
    position:relative;
    float:left;
    width:300px;
    background:#999;
    height:200px;
    padding:15px;
}
.slide{
    position:relative;
    float:left;
    overflow:hidden;
    width:0px;
}
.active{
    background:#cf5;
    color:#444;
}
.button{
    white-space:nowrap;
    margin-top:180px;
    font-size:20px;
    line-height:25px;
    text-align:left;
}

And the fun part: jQuery !

//+IE678//// HORIZONTAL ACCORDION // roXon //////
var curr = 3;   // set desired opened tab

var contW = $('.cont').outerWidth(true);
$('.cont').wrap('<div class="slide" />');
$('.slide').eq(curr-1).width(contW).prev('.title').addClass('active');
$('.title').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
    $('.slide').stop().animate({width:0},700);
    $(this).next('.slide').stop().animate({width:contW},700);
});
// TITLE ROTATION IE 6-7-8 FIX //
var titleH = $('.title').height();
var btn = $('.button');
btn.css('-webkit-transform','rotate(-90deg)');
btn.css('-moz-transform','rotate(-90deg)');
btn.css('transform','rotate(-90deg)');

if($.browser.msie && $.browser.version<="8.0"){
    btn.css({
        filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)',
        width: titleH+'px',
        position:'absolute',
        marginTop:'0px'
    });    
}

One more thing- you'll just have to wrap the accordion into a positioned 'container' with set height and width to avoid accordion elements 'dance' on window resize.