Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery UI accordion problem (could be related to jQuery UI tabs)
    primarykey
    data
    text
    <p>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: <a href="http://www.milltownyourlocalchurch.com/indextest.html" rel="nofollow">http://www.milltownyourlocalchurch.com/indextest.html</a></p> <p>The jQuery for the accordion:</p> <pre><code>&lt;!-- Accordion --&gt; &lt;script type="text/javascript" src="js/jquery-1.4.4.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(function(){ // Accordion $("#accordion").accordion({ header: "h3" }); }); &lt;/script&gt; </code></pre> <p>The css:</p> <pre><code>.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; } </code></pre> <p>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:</p> <pre><code>&lt;script type="text/javascript" language="JavaScript"&gt; $(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; }); }); &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload