Open an accordion from another page's anchor link?

Bootstrap Studio Help
1

Hi, all! I've been googling this externally but am having a hard time parsing what I find (not a coder, alas).

I have a "read more" link on my index page that I want to open a specific accordion item on a separate page (about.html) -- that is, about.html has four accordion items, and I would like this "read more" link to open the third item and scroll to it when the link on the index page ( about.html#initiatives ) is clicked.

I've found and attempted to use a few references externally, but they don't work when I try to plug them into my site and preview it. I don't know if that's because the jquery isn't running in a local preview or what.

Is there a simple way to do this? Thank you in advance.

2

Bump? All the examples I've found in searching either assume you're building the accordion from scratch with JQuery, or using a third-party plugin set. I haven't found any that seem to work natively with Bootstrap 4. I'm sure this is something that can be done; I just haven't found myself able to wrap my brain around it...

3

They don't work natively to put specific links to tabs, that's why you need a jQuery or Javascript to help them do it. Its actually very messy and can easily confuse your visitors as the address bar doesn't update to the correct page in most cases either. Try the ones you found in your search and see what it all entails. It's really not all horrible to do them using Custom Code blocks, just a bit tedious. I've got one of them on one of my client's sites and it works pretty good. I used a Custom Code block for it in BSS and imported the needed scripts and CSS files and it works well.

4

Thanks, Jo! I've tried a few and they aren't working, but I don't know if it's because the accordions they were built for used JQuery initially instead of Bootstrap (or if that's even a necessary distinction) or just that I'm putting them in wrong. If you're able to, can you share a link to the site you used them on? I find seeing things in situ more helpful than the blocks that usually come in discussion threads.

5

Haha actually the site I was going to show you isn't even working correctly so I'm going to have to fix that. Thanks for making me look and find that issue!

I think the only site I have references to things that actually works now isn't for tabs, it's for Lightbox windows which is so fricking complex I am surprised I got it to work! That was thanks to a lot of help from a javascript/jquery programmer of which I am not lol. You can see it in action here, but I'm not sure if it will help any: https://www.sparklesgemsinjewelry.com/hand-made-jewelry.html

If you go to any of the jewelry items in the dropdowns you'll get a page that has fairly large thumbnail photos on it. When you click them they open a specific Modal window for each different product. When you click the little thumbnails in those modals for items similar to it, it will open a different modal. This can go on forever! lol.

BE PREPARED for Music though, she insisted on music playing, but you can turn it off at the top of each page if you don't want it or turn your sound off if you want to.

Look at the code and see if any of it can be used for what you need. I'm guessing it's probably super overkill for what you need, but obviously what I had been using isn't working anymore either :/

6

Here's a link that might help also. I would imagine it will be similar for accordions as it is for tabs. Conversation a year ago:

https://bootstrapstudio.io/forums/topic/how-to-link-to-tabs-from-anywhere-in-the-document/

7

Thank you, Jo! I had seen that thread, but was having difficulty parsing the required steps. I'll give it another go :) (The music is... something else :lol: But what the client wants, the client gets! :D )

8

Hm. This page seems like the best candidate for something that works, but it's for an older version of Bootstrap, and also assumes you can edit the JQuery that creates the accordion: http://foundationphp.com/tutorials/jqui_specific.php Because just following the directions, it did go to the anchor I needed it to (the accordion section of the page), but didn't open the panel I wanted it to, possibly because the name isn't the same in the place where it's initialized. Given that... is a Bootstrap 4.3 accordion sort of built-in, not requiring initialization, and if so, what would it call the accordion? Thank you!