jQuery (slidorion) Accordion Slider

HTML

<link rel="stylesheet" href="http://slidorion.com/css/slidorion.css">
<script src="http://slidorion.com/js/jquery.easing.js"></script>
<script src="http://slidorion.com/dist/jquery.slidorion.min.js"></script>
<div id="slidorion" class="slidorion">
    <div class="slider">
        <div class="slide">
            <img src="http://www.capmetro.org/uploadedImages/Capmetroorg/Home_Page_Banners/NewYearsEve2014.jpg" />
        </div>
        <div class="slide">
            <img src="http://www.capmetro.org/uploadedImages/Capmetroorg/Home_Page_Banners/january2015_servicechange_approved-.jpg" />
        </div>
        <div class="slide">
            <img src="http://www.capmetro.org/uploadedImages/Capmetroorg/Home_Page_Banners/FareChange2015_Banner.png" />
        </div>
    </div>
    <div class="accordion">
        <div class="header">New Years Eve</div>
        <div class="content">Whether you live here or are just visiting, Capital Metro offers safe options for traveling on New Year’s Eve, with <strong>FREE rides after 6 p.m. </strong>Consider taking one of our special late night services, the Night Owl, MetroRapid or MetroRail, to get to and from your destination safely.</div>
        <div class="header">2015 Fares Change</div>
        <div class="content">
            <p>Capital Metro fares will change beginning Jan. 11, 2015. This fare change will be the second phase of fare policy changes approved by the board of directors in Sept. 2013.</p>
        </div>
        <div class="header">Service Change</div>
        <div class="content">
            <p>The Capital Metro board of directors has approved the following changes to the current transit system. These changes are designed to improve the customer experience while maintaining system efficiency and expanding service.</p>
            <p>Seven local routes downtown are being realigned and span of service will be extended for five local routes. These changes will go into effect on January 11, 2015.</p>
       ...

CSS

/* Slidorion Stylesheet */
 .slidorion {
   position: relative;
width: 80%;
height: 70%;
left: 5%;
background: #CBCBCB;
padding: 0;
border: 1px solid #BBB;
box-shadow: 0 0 34px #bbb;
margin-left: -436px;
}
.slider {
    width: 68%;
    height: 100%;
    position: relative;
    float: left;
    overflow: hidden;
    /* Hides the animations */
}
.slider .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.accordion {
    width: 32%;
    height: 100%;
    font-family: Verdana;
    background: #eee;
    box-shadow: -3px 0px 3px -1px rgba(51, 51, 51, 0.3);
    position: relative;
    z-index:999;
    overflow: hidden;
    float: left;
}
.accordion .header {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: bold;
    color: #333;
    background: #ededed;
    background: -moz-linear-gradient(top, #ededed 59%, #dcdcdc 100%);
    background: -webkit-linear-gradient(top, #ededed 59%, #dcdcdc 100%);
    background: -o-linear-gradient(top, #ededed 59%, #dcdcdc 100%);
    background: -ms-linear-gradient(top, #ededed 59%, #dcdcdc 100%);
    background: linear-gradient(top, #ededed 59%, #dcdcdc 100%);
    border-top: 1px solid #ccc;
}
.accordion .header:first-child {
    border-top: none;
}
.accordion .header:hover {
    background: #EDEDED;
    cursor: pointer;
}
.accordion .header.active {
    border-bottom: none;
    background: #676767 !important;
    color: #FFF;
}
.accordion .content {
    height: 258px;
    /* This height needs to be changed as it depends on the accordion height and number of tabs */
    font-weight: normal;
    font-size: 12px;
    line-height: 20px;
    margin: 0;
    padding: 16px;
    border: none;
    background: #d6d6d6;
    background: -moz-linear-gradient(top, #d6d6d6 0%, #ffffff 10%);
    background: -webkit-linear-gradient(top, #d6d6d6 0%, #ffffff 10%);
    background: -o-linear-gradient(top, #d6d6d6 0%, #ffffff 10%);
    background: -ms-linear-gradient(top, #d6d6d6 0%, #ffffff 10%);
   ...

JavaScript

$(document).ready(function () {
    $('#slidorion').slidorion({
        speed: 2000,
        interval: 10000,
        effect: 'fade'
    });
});