Ссылка в заголовке UI Accordion

05.07.2019

4485

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

<div class="accordion">
	<h3><a href="https://example.com">Ссылка 1</a></h3>
	<div>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
	</div>

	<h3><a href="https://example.com">Ссылка 2</a></h3>
	<div>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
	</div>

	<h3><a href="https://example.com">Ссылка 3</a></h3>
	<div>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
	</div>
</div>

<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<script>
$(function() {
	$(".accordion").accordion({
		active: true,
		collapsible: true
	});
});
</script>

HTML

.accordion .ui-accordion-header {
	margin: 0 0 10px 0;
	padding: 10px;
	border: 1px solid #ddd;
	background: #eee;
	cursor: pointer;
	outline: none;
}
.accordion .ui-accordion-content {
	margin: 0 0 10px 0;
	padding: 10px;
	border: 1px solid #ddd;
	background: #fff;
}

CSS

Как видно переход по ссылке не сущевстляеется

Следующий код сделает ссылку активной, после того как аккордеон будет открыт, т.е. ссылка сработает на второй клик. Используется событие activate, которое срабатывает после активации панели.

$(function() {
	$(".accordion").accordion({
		active: true,
		activate: function(event, ui ) {
			$(ui.newHeader).on('click', "a", function(event) { 
				window.location.href = $(this).attr("href"); 
			});                
		}
	});
});