Использование аккордеонов и вкладок

Question

Этот вопрос задан раньше, но не решен.

Я использую jquery Tabs и Accordion, как на одной странице, так и простые, они не будут работать вместе. Они работают отдельно на отдельных страницах, но как только theyre на той же странице, вкладки не будут работать. На самом деле, он случайно переворачивается, между которыми работает, а какой - когда я перезагружаю страницу. Я надеюсь, что гнездо гармоник в вкладках с помощью jquery.

Изменение порядка загрузки js, по-видимому, не помогает, поскольку некоторым людям повезло, хотя мой инстинкт является проблемой загрузки.

Вот HTML:

<div id="styleguide-tabs-demo-regular"> 
<ul> 
<li><a href="#tabs-1">Tab One</a></li> 
<li><a href="#tabs-2">Tab Two</a></li> 
<li><a href="#tabs-3">Tab Three</a></li> 
</ul> 
<div id="tabs-1">Tab 1 content</div> 
<div id="tabs-2">Tab 2 content</div> 
<div id="tabs-3">Tab 3 content</div> 
</div> 
<p><br /><br /><br /><br /></p> 
<div class="styleguide_demo_accordion1"> 
<h3><a href="#">Section 1</a></h3> 
<div> 
<div class="styleguide-section__accordion-demo-element">Content for Section 1</div> 
</div> 
<h3><a href="#">Section 2</a></h3> 
<div> 
<div class="styleguide-section__accordion-demo-element">Content for Section 2</div> 
</div> 
<h3><a href="#">Section 3</a></h3> 
<div> 
<div class="styleguide-section__accordion-demo-element">Content for Section 3</div> 
</div> 
</div> 
<p>&nbsp;</p> 

JQuery:

$("div.styleguide_demo_accordion1").accordion({header: "h2", collapsible: true, heightStyle: "content", active: false}) 

$("div#customaccordion").accordion({header: "h2", collapsible: true, heightStyle: "content", active: false}) 

$(function() { 
    $("#tabs").tabs(); 
    }); 

$("div#styleguide-tabs-demo-regular").tabs(); 

Любая помощь будет удивительно!

Answer 1

Я попробовал ваш код, созданный JSFiddle и все, что я должен был изменить была эта линия:

$("div.styleguide_demo_accordion1").accordion({header: "h2", collapsible: true, heightStyle: "content", active: false}) 

в

$("div.styleguide_demo_accordion1").accordion({header: "h3", collapsible: true, heightStyle: "content", active: false}) 

Так в основном, после изменения header вариант из h2 в h3, он работает по назначению. Возможно ли, что вы только что сделали ошибку ввода?

Answer 2

Ничего странного. Есть <h3> в HTML, а header: "h2" в JS
Изменить все <h3> к <h2> или header: "h2" к header: "h3" и будет хорошо