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

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

<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"); 
			});                
		}
	});
});
JS
05.07.2019, обновлено 16.10.2019

Комментарии

, чтобы добавить комментарий.

Другие публикации

Ниже приведён список MIME-заголовков и расширений файлов.
2362
+1
С фоном у текста есть проблема – у элемента с display: inline при переносах текста не работают отступы (padding) по бокам. Исправить это можно следующими способами.
18194
+2
Пример верстки слайдера на плагине bxSlider, который растягивается на всю ширину сайта, оставляя по центру...
2449
0
Пример горизонтального меню для лэндингов, в котором реализовано...
4857
+3
Сделать табы на jQuery очень просто, сделаем HTML разметку и добавим к нему JS код...
9990
+3
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
18599
+9