Using magento 2 accordion widget with href links

Question

I am trying to build a category accordion in my side bar and I am using magento 2 accordion widget

https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/widgets/widget_accordion.html

<?php
$counter = 0;
foreach ($collection as $index=>$category):
 ?>
 <?php $activeClass = $category->getIsActive() ? 'active' : ''; ?>
 <div class="blog-list">
 <div class="parent-categories" id="accordion" data-mage-init=
 '{"accordion":{
 "openedState": "active", 
 "collapsible": true, 
 "active": false, 
 "multipleCollapsible": true}}'>
 <div data-role="collapsible">
 <div data-role="trigger">
 <div class="card-header" id="heading<?= $counter ?>">
 <h5 class="category-title">
 <button type="button" class="category-button" data-toggle="collapse" data-target="#collapse<?= $counter ?>">
 <a class="blog-link"
 title="<?= $block->escapeHtml($category->getName()); ?>"
 href="<?= $block->escapeUrl($category->getUrl()); ?>">
 <?= $block->escapeHtml($category->getName()); ?> (<?= $block->escapeHtml($block->getPostsCount($category->getId())); ?>)
 </a>
 <?php if ($category->getLevel() == '1') : ?>
 <i class="fa fa-angle-down"></i>
 <?php endif; ?>
 </button>
 </h5>
 </div>
 </div>
 </div>
 <div data-role="content">
 <?php if ($category->hasActiveChildren()): ?>
 <ul class="blog-categories -level<?= $category->getLevel() + 1; ?>">
 <?= /* @noEscape */ $block->renderChildrenItems($category->getCategoryId()); ?>
 </ul>
 <?php endif; ?>
 </div>
 </div>
</div>
 <?php
 $counter++;
endforeach; ?>

The catgeories are rendered and they are fine, but the issue is that the

<a class="blog-link" 
 title="<?= $block->escapeHtml($category->getName()); ?>" 
 href="<?= $block->escapeUrl($category->getUrl()); ?>">

does not work. So when ever I click on accordion elements or child elements it just opens/closes it. How can I make the links clickable? I guess it should have something with the data-mage-init but I am not sure how to fix it. Can someone please help me?

Answer 1

I have worked some with accordion, I thought I might be able to help. However, I am not getting a fair idea what are you trying to achieve, as I understood this question, Do you want to create something like this ?

example

Where Category one (title) will act as button to open close links

example 2

and clicking on blog post hyperlinks will lead to respective links.

If this is correct your logic will be something like -

div blog link with mage init 
 foreach categories as category
 title = category->Name
 content = Post->Name [Post->url]
 end foreach

If you just want nested categories like -

Parent Categories
 Sub Categories (4)
 Sub Sub categories 

this accordion widget might not be the best option to accomplish such tree like display i think.

here is the example how magento is showing categories in admin with similar tree structure -

https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Catalog/view/adminhtml/templates/catalog/category/tree.phtml

Answer 2

Try moving the link from trigger part to content part.

Answer 3

Please change the code as below

From:

<h5 class="category-title">
 <button type="button" class="category-button" data-toggle="collapse" data-target="#collapse<?= $counter ?>">
 <a class="blog-link"
 title="<?= $block->escapeHtml($category->getName()); ?>"
 href="<?= $block->escapeUrl($category->getUrl()); ?>">
 <?= $block->escapeHtml($category->getName()); ?> (<?= $block->escapeHtml($block->getPostsCount($category->getId())); ?>)
 </a>
 <?php if ($category->getLevel() == '1') : ?>
 <i class="fa fa-angle-down"></i>
 <?php endif; ?>
 </button>
</h5>

To:

<h5 class="category-title" data-toggle="collapse" data-target="#collapse<?= $counter ?>">
 <a class="blog-link"
 title="<?= $block->escapeHtml($category->getName()); ?>"
 href="<?= $block->escapeUrl($category->getUrl()); ?>">
 <?= $block->escapeHtml($category->getName()); ?> (<?= $block->escapeHtml($block->getPostsCount($category->getId())); ?>)
 </a>
 <?php if ($category->getLevel() == '1') : ?>
 <i class="fa fa-angle-down"></i>
 <?php endif; ?>
</h5>

• Korbin: Hi, This didn't work. it still acts as collapsible button and just toggles. The links are not working when I click on them.