MyBB Community Forums

Found an accordion code, and managed to get it coded and working /except/ for the jquery. I just can't get it to work D= I put it in the headers, the header include. I wrapped it in no conflict, changed the $ signs. I just can not get it to work :|

The jQuery

$(document).ready(function() {
 
    $('.slide')
        .bind('open', function(){
            if(! $(this).hasClass('open')){
                $(this).next().trigger('open');
                $(this).addClass('open');
                $(this).animate({left: "-=590px"});
            }
            else{
                $(this).prev().trigger('close');
            }
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
        })
        .bind('close', function(){
            if($(this).hasClass('open')){
                $(this).removeClass('open');
                $(this).animate({left: "+=590px"});
                $(this).prev().trigger('close');
            }
        });
 
    $('.slidebutton')
        .click(function(){
            $(this).parent().trigger('open');
            $('#content-' + $(this).parent().attr('id')).trigger('show');
        });
 
});

The HTML

<div id="accordion">
    <ul id="slides">
 
        <li class="slide open active" id="slide-1">
            <a class="slidebutton" href="javascript:void(0);">Jellyfishes of the Deep</a>
            <div class="slide-content">
               TESTING SLIDER 1
            </div><!-- slide content -->
        </li><!-- slide 1 -->
 
        <li class="slide open" id="slide-2">
            <a class="slidebutton" href="javascript:void(0);">Shark Week</a>
            <div class="slide-content">
               TESTING SLIDER 2
            </div><!-- slide content -->
        </li><!-- slide 2 -->
 
        <li class="slide open" id="slide-3">
            <a class="slidebutton" href="javascript:void(0);">Swimming with the Fishes</a>
            <div class="slide-content">
               TESTING SLIDER 3
            </div><!-- slide content -->
        </li><!-- slide 3 -->
 
        <li class="slide open" id="slide-4">
            <a class="slidebutton" href="javascript:void(0);">Dolphins & Friends</a>
            <div class="slide-content">
               TESTING SLIDER 4
            </div><!-- slide content -->
        </li><!-- slide 4 -->
 
    </ul>
</div><!-- accordion -->

#accordion {
    position: relative;
    width: 795px;
    height: 290px;
    margin: 60px auto;
}
 
#slides {
    list-style: none;
    width: 795px;
    overflow: hidden;
    height:290px
}
 
#slides li.slide {
    overflow: hidden;
    clear: both;
    width: 640px;
    background: #00202f;
    height: 290px;
}
 
#slides .slide-content {
    width: 590px;
    height: 290px;
    color: #444;
    margin-left: 50px;
    padding: 5px 0;
}



#slide-1 { position: absolute; top: 0; left: 150px; z-index: 4; }
 
#slide-2 { position: absolute; top: 0; left: 100px; z-index: 3; }
 
#slide-3 { position: absolute; top: 0; left: 50px; z-index: 2; }
 
#slide-4 { position: absolute; top: 0; left: 0px; z-index: 1;}



#slides a.slidebutton {
    display: block;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform-origin: 120px 120px;
    -moz-transform-origin: 130px 130px;
    width: 300px;
    height: 50px;
    position: absolute;
    top: 70px;
    text-align: right;
}

Did you call the JQuery Library in your code at all? IIRC the link is http://ajax.googleapis.com/ajax/libs/jqu...ery.min.js

To insert that into your code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

It works!

............how dumb am I :|

Thank you so much xDD

(2013-02-02, 06:58 AM)Risachan Wrote: [ -> ] It works!

............how dumb am I :|

Thank you so much xDD

Just a tip, Good coding practice is to put that JS insert, and any JQuery in the footer, before </body>