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 ?

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

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>