Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   скрипт Accordion и Tabs (https://javascript.ru/forum/jquery/34660-skript-accordion-i-tabs.html)

barracuda116 14.01.2013 08:37

скрипт Accordion и Tabs
 
Возникла необходимость организовать с помощью Tabs вкладки на странице http://terram.msk.ru/index.php/oblas...niya/zashchita со своим Accordion в каждой вкладке.
Скрипт вкладок работает везде, а вот accordion лишь в первой вкладке.
Не могу понять почему.
Сайт на джумле 2.5.х
код в шаблоне:
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<script type="text/javascript">
	$(function() {
		$( "#tabs" ).tabs();
		$( "#accordion" ).accordion({collapsible: true});
	});
</script>

код из материала:
<div id="tabs">
	<ul>
		<li id="tab"><a href="#tabs-1">вкладка1</a></li>
		<li id="tab"><a href="#tabs-2">вкладка2</a></li>
		<li id="tab"><a href="#tabs-3">вкладка3</a></li>
	</ul>
	<div id="tabs-1">
		<div class="column01">
			<p>Текст вкладки1</p>
		</div>
		<div id="accordion" class="acc">
			<div class="acc-head">
				<h3>Заголовок1</h3>
				<p>Щелкните для большей информации</p>
			</div>
			<div class="acc-content">
				<p>блок1</p>
			</div>
		</div>
	</div>
	<div id="tabs-2">
		<div class="column01">
			<p>Текст вкладки2</p>
		</div>
		<div id="accordion" class="acc">
			<div class="acc-head">
				<h3>Заголовок2</h3>
				<p>Щелкните для большей информации</p>
			</div>
			<div class="acc-content">
				<p>блок2</p>
			</div>
		</div>
	</div>
	<div id="tabs-3">
		<div class="column01">
			<p>Текст вкладки3</p>
		</div>
		<div id="accordion" class="acc">
			<div class="acc-head">
				<h3>Заголовок3</h3>
				<p>Щелкните для большей информации</p>
			</div>
			<div class="acc-content">
				<p>блок3</p>
			</div>
		</div>
	</div>
</div>


в скриптах новичок, поэтому по возможности "как для блондинки"

Deff 14.01.2013 09:24

barracuda116, Первую часть поменяйте
<style>
.acc-content { 
height: 180px;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
	$(function() {
		$( "div[id='tabs']" ).tabs();
		$( "div[id='accordion']" ).accordion({collapsible: true});
	});
</script>

barracuda116 14.01.2013 17:05

Спасибо огромное, всё заработало. :dance:


Часовой пояс GMT +3, время: 19:59.