Open accordion based on URL and target ID

I Need Help
1

As the title suggest… I saw this https://stackoverflow.com/questions/22254248/bootstrap-3-expand-accordion-from-url
Would any Js gurus know if any of the solutions might work in blocs

2

Blocs 3 uses Bootstrap 4, which required a different approach. I have a Bric in the works that works for Tabs and I am also including Accordions into it.

Its been on the back burner for a bit. But recently @JDW tested an early version for me.

1 Like
3

Hi malachiman.
I noticed the last post in my link mentioned bootstrap 4.4 - do you think that might work?

4

I found this related to bootstrap 4 -

if (window.location.hash) {
            var jQuerytarget = jQuery('body').find(window.location.hash);
            if (jQuerytarget.hasClass('collapse')) {
                var jQuerytargetAccordion = jQuerytarget.find('.collapse');
                jQuerytarget.collapse('show');
            }

}

But doesn’t seem to work in footer/header or after docx. - just leaves some stray text on the page. im only testing using the preview as I prefer not to go live unless it has a chance of working.

5

Not sure whether the code will work or not, but if you wanted to test it, upload a copy of your website to a subfolder in your domain hosting account. You will then be able to check if everything works online. Just add the sub-folder name to your URL in a web browser. Once you’re happy, you can delete the sub-folder.

6

Good tip. Assuming it works Would the code be added to the page footer?

7

I added Accordion support today to my bric. It will be available shortly, just need to make a support page for it.

Shortly = hopefully this week. I have a staff meeting tomorrow and that may change my entire week as we start removing social restrictions here in New Zealand.

8

@PeteSharp
It’s been 29 days since your post, so I would like to volunteer to test the new accordion functionality.

My personal aims for your modified Bric are twofold:

  1. I want to put a text link on one page in my site that when clicked should open a different page in my site AND open the correct Accordion tab automatically.
  2. I want to put a text link with Anchor reference on one page in my site that when clicked should open a different page in my site AND open the correct Accordion tab AND jump to the specific Anchor referenced in the original text link.

FYI, to create text Anchors in Blocs:

  1. Select a word of text on a page you want to be the target Anchor, then make it a SPAN.
  2. Give your SPAN an ID. You now have created your target Anchor!
  3. Link to that Anchor by creating a separate link that has “PageName.html#YourAnchorName” in it, if on the same page. (PageName and YourAnchorName are names you create within your own site in Blocs.) And if on another page, you would need to type the full URL plus the “#” part at the end.

Is my aim exclusive to me? Heck no. Anyone who uses Accordions as a website FAQ would want this. It’s only obvious that we would want to reference a specific line of text within our FAQ, either from the same FAQ page (e.g., easy jump-to links atop that FAQ page) or from a different page. If from a different page, we should be able to click the link, then have the FAQ page open, the appropriate Accordion expand, then jump to the specific target Anchor. This is HUGELY important when you have a very long and very complex FAQ.

Honestly, this should be build into Blocs.

Anyway, I look forward to testing your updated Bric!

9

Hey @JDW,

I was ambitious! lol

I live in New Zealand and we pretty much became Covid free a few weeks ago. (since then we have had a few cases imported from overseas travellers… :thinking:). So work has been pretty busy - I still intend to roll out my Bric. But I have several projects overlapping at the moment that take priority.

You’re request number 2 is a tricky one. I might not be able to achieve that?

10

That’s the big problem I have right now even with tabs. I have a lot of tabbed content, so when I want to link to content within a tab, what happens is that (thanks to you) the tab will open but only the topmost content will be within view. Even on a 27" iMac it may not all fit. So the person who clicked the link might wonder if the link was improperly constructed. You would think people would just scroll down, but not everybody thinks logically.

That is why, whether possible to do or not, the need still exists. We need ways to link content – one of the most fundamental principles of the entire WWW, in fact. The challenge is how to do that.

11

Well as I understand it, and I could be wrong.

Is you need to trigger the Accordion (Which is not so difficult), wait for that to complete, then scroll to the now available target.

Depending on how slow your Accordion is toggling will have an effect on how slow that process is going to be actioned. I have never tried doing this and it potentially will be a poor user experience maybe? Maybe its possible to override the collapse speed in the process?? Not sure.

The other thing is you would have to wait until the page loads to start it all I think.