Open an accordion from another page's anchor link?

Forums Help and How To Open an accordion from another page's anchor link?

This topic contains 7 replies, has 2 voices, and was last updated by  Jan Andrea 1 month, 1 week ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • Jan Andrea
    Member

    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.

    Jan Andrea
    Member

    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…

    Jo
    Member
    Valued

    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.

    Jan Andrea
    Member

    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.

    Jo
    Member
    Valued

    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 :/

    Jo
    Member
    Valued

    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:

    How to link to Tabs from anywhere in the document

    Jan Andrea
    Member

    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 😆 But what the client wants, the client gets! 😀 )

    Jan Andrea
    Member

    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!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.