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
});
精彩评论