Ссылка в заголовке 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
Ниже приведён список MIME-заголовков и расширений файлов.
1719
+1
Фон под текстом
С фоном у текста есть проблема – у элемента с display: inline при переносах текста не работают отступы (padding) по бокам. Исправить это можно следующими способами.
14463
+2
Слайдер bxSlider на всю ширину сайта
Пример верстки слайдера на плагине bxSlider, который растягивается на всю ширину сайта, оставляя по центру...
2204
0
Фиксированное горизонтальное меню с активными пунктами
Пример горизонтального меню для лэндингов, в котором реализовано...
4193
+2
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
6865
+10
Как сделать табы на jQuery
Сделать табы на jQuery очень просто, сделаем HTML разметку и добавим к нему JS код...
8723
+2