jQuery components

<!--Tab-->
<div class="tt-tabs cleafix">
    <ul class="tab-header clearfix">
        <li><a href="javascript:;">Tab item</a></li>
    </ul>
    <div class="tab-content clearfix">
        <div class="tab-content-item">Tab content</div>
    </div>
</div>


<!--Accordion-->
<div class="tt-accordion">
    <h3 class="accordion-title current"><a href="#">Accordion title</a></h3>
    <div class="accordion-content">Accordion Content</div>

    <h3 class="accordion-title current"><a href="#">Accordion title</a></h3>
    <div class="accordion-content">Accordion Content</div>
</div>


<!--Toggle-->
<div class="tt-toggle tt-toggle-closed" role="tablist">';
    <div class="tt-toggle-title" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
        <h3><a href="#">Title</a></h3>
    </div>';
    <div class="tt-toggle-inner" role="tabpanel">Content</div>
</div>


<script type="text/javascript">

//Tab
jQuery(".tt-tabs").each(function(){
        var $this = jQuery(this);
        $this.find(".tab-header li a").each(function(index){
            if( index===0 ){
                jQuery(this).addClass("active").closest('li').addClass("active");
            }
        });
        $this.find(".tab-content-item").each(function(index){
            if( index === 0 ){
                jQuery(this).fadeIn('fast');
            }
            else{
                jQuery(this).fadeOut('fast');
            }
        });
        $this.find(".tab-header li a").click(function(){
            $this.find(".tab-header li a").removeClass("active").closest('li').removeClass("active");
            jQuery(this).addClass("active").closest('li').addClass("active");
            var indexEl = $this.find(".tab-header li a").index(this);
            $this.find('.tab-content-item').stop().hide();
            $this.find('.tab-content-item').each(function(index){
                if(indexEl===index){
                    jQuery(this).show();
                }
            });
        });
    });


//Accordion
jQuery(".tt-accordion").each(function(){
        jQuery(this).find(".accordion-title").not(".current").next(".accordion-content").hide();
        var $self = jQuery(this);
        jQuery(this).find('.accordion-title').click(function(e){
            e.preventDefault();
            $self.find('.accordion-title').not(this).removeClass('current');
            jQuery(this).toggleClass('current');
            $self.find('.accordion-title').each(function(){
                if(jQuery(this).hasClass('current')){
                    jQuery(this).find('.ui-icon').addClass('ui-icon-triangle-1-s').removeClass('ui-icon-triangle-1-e');
                    jQuery(this).next('.accordion-content').slideDown('fast');
                }else{
                    jQuery(this).find('.ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
                    jQuery(this).next('.accordion-content').slideUp('fast');
                }
            });
        });
    });


//Toggle
jQuery(".tt-toggle").not(".tt-toggle-opened").find(".tt-toggle-inner").hide();
    jQuery(".tt-toggle").each( function () {
        var $this=jQuery(this);
        $this.find('.tt-toggle-title').click(function(e){
            e.preventDefault();
            $this.toggleClass('tt-toggle-opened');
            if($this.hasClass('tt-toggle-opened')){
                $this.find('.ui-icon').addClass('ui-icon-triangle-1-s').removeClass('ui-icon-triangle-1-e');
                $this.find('.tt-toggle-inner').stop().slideDown('fast');
            }else{
                $this.find('.ui-icon').addClass('ui-icon-triangle-1-e').removeClass('ui-icon-triangle-1-s');
                $this.find('.tt-toggle-inner').stop().slideUp('fast');
            }
        });
    });


</script>