[SOLVED] Put hyperlink on accordion item-title

Hi @nolimits4web,

I have created a menu listing with accordion using 4.3.1 version where I want my accordion item-title to have a hyperlink along with accordion functionality.

Is there any way i can make them both work as per needed?

Suppose I click on name of item-title so it should be redirected to a specified page and if I click on other part of accordion-title it should toggle the accordion?

A quick response will be helpful.

Thanks in advance.

Just wrap item title text with <a> tag, it should work

Hi @nolimits4web,

I tried your suggested way but it was not accepting an anchor inside another. But I found a different solution mentioned below.

<div class="list accordion-list">
            <a href="#"><div class="block-heading text-color-customorange">{{name}}</div></a>
            <ul>
            {{#catalogGroupView}}
                <li class="accordion-item">
                    <div class="item-content item-link">
                        <div class="item-inner">
                            <a href="#" class="text-color-black25"><div class="item-title">{{name}}</div></a>
                        </div>
                    </div>
                <div class="accordion-item-content">
                    <div class="block">
                    <div class="list links-list">
                        <ul>
                        {{#catalogGroupView}}
                            <li><a href="#" class="text-color-gray">{{name}}</a></li>
                        {{/catalogGroupView}}
                        </ul>
                    </div>
                    </div>
                </div>
                </li>
            {{/catalogGroupView}}
            </ul>
        </div> 

I changed item-content item-link anchor to div and then wrapped item-title with anchor then it worked for me. Thank you for your suggestion.

1 Like