Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
 
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?

Find us on Facebook Follow us on Twitter View our YouTube channel
Search our site
 All Forums
 General
 Design issues
 Open Accordion Content from Anchor Link
Author « Topic »  

RJB
Ecommerce Template Expert

United Kingdom
777 Posts

Posted - 12/14/2022 :  14:46:12  
Hi, I'm trying to set up a page on my site with collapsible content displayed using an accordion. I found some code at w3schools which works well. However, I would like to link to and open particular accordion content on the page using an external link with anchor text, but can't figure out a way to do it. I've tried various coding solutions that I found online but nothing seems to work. Can anyone suggest a solution?

Richard.

dbdave
ECT Moderator

USA
10276 Posts

Posted - 12/14/2022 :  18:01:36  
Post a link to the w3schools page and I'll take a look to see if I can see a way to link...
David

RJB
Ecommerce Template Expert

United Kingdom
777 Posts

Posted - 12/15/2022 :  04:06:44  
Hi David, Thanks for offering to look at this..The accordion code I'm using is at https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol

Richard.

dbdave
ECT Moderator

USA
10276 Posts

Posted - 12/15/2022 :  06:30:05  
Hi Richard, I believe the trick will be to write the link with a javascript onclick event to do what the code does to the menu.

If you go back to that page https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol
Add the following just above the closing body tag

<script>
function menulinkopen(mnuitm) {
document.getElementsByClassName("accordion")[mnuitm].classList.toggle("active");
var accrdnxt = document.getElementsByClassName("accordion")[mnuitm].nextElementSibling;
accrdnxt.style.maxHeight=accrdnxt.scrollHeight + "px";
}
</script>
<div style="margin-top:30px;"><button onclick="menulinkopen(1)">Open 2nd the Menu item</button></div>

</body>
</html>


Now click the RUN button and you will see my button appear and clicking it will open the 2nd accordion.

To use this on your site, just use the function as it is and place that at the bottom of your bage before the closing </body> tag.

Then create your link.
<button onclick="menulinkopen(1)">Open 2nd the Menu item</button>

The key here though is the number placed in the function call.
Most all computer code starts counting at zero, so a zero there will trigger the first accordion, a 1 the second, and a 2 the third and so on.

Anyway, that should work for you and let me know how you get along.


Thanks,
David

Edited by - dbdave on 12/15/2022 06:32:42

RJB
Ecommerce Template Expert

United Kingdom
777 Posts

Posted - 12/15/2022 :  09:49:54  
Hi David,

Thank you for the code suggestion provided. I tried this and it works for the button on page, but I wanted to link to the accordion content page from another page. For example, a link to www.myurl/accoardionpage.php#anchor. Can this or any other solution be used like this?

Richard.

dbdave
ECT Moderator

USA
10276 Posts

Posted - 12/15/2022 :  09:58:30  
Hi Richard, sure anythings possible as they say.
I can think of several ways to do this, but maybe it's best to send me a message (click my user name) and links to the pages and I'll see what I can whip up.

David
  « Topic »  
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2022 ecommercetemplates.com
This page was generated in 0.02 seconds. Snitz Forums 2000