Responsive Panel, Toggle Button Click

[Ricky]

I have two responsive panels in the page which then collapse into two "hamburger" menus. The problem that I have is when I click on one "hamburger" menu both of them expand. How do you go about expanding each "hamburger" menu separately?

For background, I have created a default website and added a page with the same code as found at this link. 

https://demos.telerik.com/aspnet-mvc/responsive-panel

The first "hamburger" menu is the default menu items of a web site and the second "hamburger" menu is generated by the code used from the above link.

I have also uploaded a screenshot for reference. What am I missing?

Thank you,

Ricky

 

[Martin]

Hello Ricky,

Thank you for the provided screenshot.

Based on the shared information, I am not able to say what might be causing the reported behavior. Would it be possible to prepare a small project that demonstrates the issue? I will be able to debug it and find out what is reason for the problem. If that is not possible, please share some code snippets of the components which are relevant to reproducing the issue and how the menus are being expanded. 

Looking forward to your reply.

Regards,
Martin
Progress Telerik

[Ricky]

Martin,

I have attached a full project. Note when you click any one hamburger menu they both open or close. I would like to keep the actions separate.... the corresponding hamburger menu will open when clicked.

Thanks.

[Martin]

Hello Ricky,

Thank you so much for the provided example.

The reason for the behavior is because the buttons share the same classes, so clicking one of them makes both panels open/close. To solve that, you can add a toggleButton for each Responsive Panel, each with an Id.

Attached you will find the modified example for reference.

Let me know if you have any questions.

Regards,
Martin
Progress Telerik

[Ricky]

Mark,

Thank you for the attached example. I think I understand. Each button gets its own Id and then with .the "toggle-button" you reference each individual button, thus keeping them separate from each other.

Thank you.