开发者

jQuery UI accordion problem (could be related to jQuery UI tabs)

Does anyone know why, when I move my accordion from tab1 into tab2, it stops working properly. I have given it a height and width. I have hosted it online for your convenience, it is situated in tab2 here: http://www.milltownyourlocalchurch.com/indextest.html

The jQuery for the accordion:

<!-- Accordion -->
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript">
            $(function(){
                // Accordion
                $("#ac开发者_开发知识库cordion").accordion({ header: "h3" });
            });
</script>

The css:

.ui-accordion { width: 100%; height: 100%;}
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }*/
.ui-accordion .ui-accordion-content-active { display: block; }

I tried playing about with the dimensions, but its still acting wierd. As i mentioned, it works fine when its in tab 1. Im certain its to do with tabs so heres the tabs script:

<script type="text/javascript" language="JavaScript">
$(document).ready(function() {
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });
});
</script>


try addin these options to accordion eg

$( "#accordion" ).accordion({
 'fillSpace': true,
 'clearStyle': true
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜