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

Ссылка в заголовке 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
1664

Комментарии

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

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

Список MIME типов
Ниже приведён список MIME-заголовков и расширений файлов.
6522
+2
Фон под текстом
С фоном у текста есть проблема – у элемента с display: inline при переносах текста не работают отступы (padding) по бокам. Исправить это можно следующими способами.
32115
+3
Слайдер bxSlider на всю ширину сайта
Пример верстки слайдера на плагине bxSlider, который растягивается на всю ширину сайта, оставляя по центру...
3326
-1
Фиксированное горизонтальное меню с активными пунктами
Пример горизонтального меню для лэндингов, в котором реализовано...
7496
+4
Сохранить открытую вкладку в Bootstrap Tabs
В данной статье представлены два метода, как сохранить открытую вкладку в Bootstrap Tabs, поле перезагрузки страницы...
2021
+2
Как сделать интерактивную схему на SVG + jQuery
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
25976
+11