JS/jQuery

Ссылка в заголовке 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 июля 2019

Темы

jQuery jQuery UI

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

Пример верстки слайдера на плагине bxSlider, который растягивается на всю ширину сайта, оставляя по центру...
Применение масок ввода у полей форм значительно упрощает их использование, уменьшает количество ошибок и приводит...
Пример горизонтального меню для лэндингов, в котором реализовано: При прокрутке меню фиксируется. Выделение...
Примеры как на jQuery и показывать скрывать определенный текст по клику на ссылку или кнопку.
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...