Аккордеон JQuery должен срабатывать только при нажатии на кнопку а не весь блок?

Question

[Макс]

Работает на сайте WP за основу взят готовый плагин
Есть скрипт

jQuery(document).ready(function($){
$("#accordions.accordions").accordion({
active:'', 
event: "click", 
collapsible: false, 
heightStyle: "content", 
animated: "swing", 
navigation: true})
})

Вот сам Аккордеон HTML

<div id="accordions" class="accordions accordions-themes flat accordions ui-accordion ui-widget ui-helper-reset" role="tablist">
<div style="" class="accordions-head ui-accordion-header ui-state-default ui-accordion-icons ui-corner-all" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="false" aria-expanded="false" tabindex="-1">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
<span class="accordions-head-title"><a href="" ">Заголовок ссылка</a></span>
<i class="accordion-icons right accordion-plus fa fa-chevron-down"></i>
<i class="accordion-icons right accordion-minus fa fa-chevron-up"></i>
<a href="" class="na-site" >
<i class="fa fa-chevron-right na-site"></i></a>
</div>
<div class="accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-2" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="true" style="display: none;"> Текст который отображается при нажатии</div>
</div>

Как сделать чтобы аккордеон срабатывал только при нажатии на

<i class="accordion-icons right accordion-plus fa fa-chevron-down"></i>
<i class="accordion-icons right accordion-minus fa fa-chevron-up"></i>

А если нажимаем на
<a href="" ">Заголовок ссылка</a>

или

<a href="" class="na-site" ><i class="fa fa-chevron-right na-site"></i></a>

Происходил переход по ссылке

Answer 1

[Максим Тимофеев]

Решение лежит в плоскости JQUERY, зачем Вы html привели?
Я думаю проще взять другой аккордеон, например:
https://getbootstrap.com/docs/4.0/components/collapse/
Или самому написать, там 20 строк кода.