<div class="uk-accordion" data-uk-accordion>
<div class="uk-accordion-title">
<h3><a href="#">Title</a></h3>
<div>something else</div>
</div>
<div class="uk-accordion-content">...</div>
</div>
By default, once the accordion component is initiated, the whole element of .uk-accordion-title will become clickable and clicking it expands the content, even if users are clicking the link inside it. How can I make the links clickable and only clicking elsewhere expands the content?
Currently, UIKit's Accordion component needs the "uk-accordion-title" and "uk-accordion-content" elements to be grouped inside a 'parent', which is missing from your code. UIKit needs this parent in order to dynamically add a uk-open class to it, to make the accordion 'open'. So, your original code structure should be something like this:
<div uk-accordion>
<div>
<div class="uk-accordion-title">
<h3><a href="https://example.com">Accordion Title</a></h3>
<div>some accordion sub-title here</div>
</div>
<div class="uk-accordion-content">
Accordion content that is displayed when open.
</div>
</div>
</div>
The reason why your <a> element is not working as expected is because by default, when you click an <a> element, the click event will be allowed to 'propagate'. When the click happens inside a UIKit accordion title, UIKit will 'trap' that click event, and will override its default behaviour - using it to 'open' the accordion.
So, in order to stop UIKit from overriding the default <a> click behaviour, what you need to do is to get the <a> element to stop the click event from propagating to UIKit, like this:
<a href="https://example.com" onclick="event.stopPropagation();">
Now UIKit will not see the 'click', and won't override it - and the <a> element will be allowed to do its usual function when clicked.
Clicking somewhere else in the accordion title will still generate a 'click' event, which will be trapped by UIKit, and will open the accordion, as expected.