Easy implementation Accordion type JQuery plugin

Plugin created special for official site of annual Jerusalem's Traditional Jazz Festival «Jazz Globus» in 2013-2015.
Show festival's program by days and actions. Alloved open by default on specified day program.
Requirements: JQuery 1.10.1, 2.0.3 or later; browsers: IE (9 or later) / Chrome / Mozilla.
Correctly support up to 8 slides and items for each.
Open to development and customization. Free for personal use. Download here.
Return to plugins list

Implementation example:

  1. Append to page references to 2 required plugin files as:
    <link href="/Plugin/Festival/jq.festival-1.2.1.css" type="text/css" rel="stylesheet" />
    <script src="/Plugin/Festival/jq.festival-1.2.1.js"></script>
  2. Create in any div element ul with id «festival»:
    <ul id="festival">
  3. Put slides items into ul as li elements with unique id as «slide_01»:
    <ul id="festival">
        <li id="slide_01"> ... </li>
        <li id="slide_02"> ... </li>
        <li id="slide_08"> ... </li>
  4. Create tag span with class «slide» as envelopment for slide's content.
    Put info additional tag span element with class «bookmark» for vertical slide title and image tag for slide background:
    <li id="slide_01">
        <span class="slide">
            <span class="bookmark">1st day</span>
            <img src="/Scenes/acDay_01.jpg" alt="" />
            <!-- Follow code here -->
  5. Insert into each slide tags a as inner item box and put navigate Url instead symbol #.
    Input image tag as small image and span element for explanation text:
    <li id="slide_01">
        <span class="slide">
            <span class="bookmark">1st day</span>
            <img src="/Scenes/acDay_01.jpg" alt="" />
            <a class="box" href="#">
                <img src="/Scenes/im_01_01.png" width="80" height="60" align="left" />
                    <strong>Slava Ganelin</strong><br />
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
            <a class="box" href="#"> ... </a>
            <a class="box" href="#"> ... </a>
            <a class="box" href="#"> ... </a>
  6. Find in file jq.festival-1.0.4.js line commented as TEMPORARY FOR DEVELOPMENT and remove follow command alert:
  7. Insert jQuery code for run plugin script on page loading:
    <script type="text/javascript">
        // On document ready
        $(document).ready(function () {
            // Festival scheduler loading
    Note: parameter number 0 in «festival» method point on start-up expanded slide index (actual for 8 from 0 up to 7).
Very easy implements on ASP.Net or MVC platforms. You can also customize this plugin.
We not recommend to change jQuery code, but you can change styles in CSS file or use additional CSS for overwrite styles.
Irena Warshavsky Studio ● Rishon Le-Zion, Israel ● (972-54) 520-45-65 ● warshavsky@gmail.com ● ©2005-