Create a link to open a specific tab on an accordion

Hello Daniel,

ID should have some value, for example: .
Please, note that I suggest adding id to tag. But you can experiment.

Then the link in the menu should have this link .

Dear Gina

Thank you for your anwser. I tried to klick the links you provided, but they don't open.
Could you please make me an example.

Thank you

Daniel

Dear Gina - sorry, I was not clear.

This is my code - in the attached file "code.jpg" because this editor cleans the codes.
See my link:

Why doesn't it work?

Daniel

Please, try adding id="tab0" to the tag below as well. And other IDs to their tags.

Please, try adding id="tab0" to the <a> tag below as well. And other IDs to their <a> tags.
>
> Gina

Isn't this exactly what I did in my examples: code.jpg & link.jpg?

CODE:
div class=" bd-menuitem-14" id="tab2"
a data-toggle="collapse" data-target="#tab2 + div" class="">TITLE ACCORDION 3<

link
/offer-de#tab2

sorry, that i don't understand it.

daniel
link ffer-de#tab2 sorry, that i don't understand it. daniel
link ffer-de#tab2 sorry, that i don't understand it. daniel link ffer-de#tab2 sorry, that i don't understand it. daniel

Try like this:

<div class=" bd-menuitem-14" id="tab2">
<a data-toggle="collapse" data-target="#tab2 + div" class="" id="tab2">TITLE ACCORDION 3<

Gina

Dear Gina
Thank you for your help, but it still doesn't work -> see picture with Code and Webpage
Any other ideas?
Daniel

Daniel,

Try adding this code to Home -> Settings -> Additional HEAD HTML:

<script>
var hash = window.location.hash;
var anchor = $('a[href$="'+hash+'"]');
if (anchor.length > 0){
anchor.click();
}
</script>

If it still doesn't work, please, attach your current theme with themler editor and content included.

Gina
Themler Support

Hi Gina

Still no result. Please find theme in the attached file.
Thank you

Daniel

I can't find any accordion tabs in the content in this file.

Please, paste entire code you used here (html and JS) and the link to the article that you used to build this accordion.

Gina

Also, please, note that you need to enable ScrollSpy plugin under Home -> Settings:

Gina

Hi Gina

Here the link to the page with the accordion: https://mindflow-coach.com/index.php/de/offer-de#tab1
The complete code is in accordion with content.html
In the attached file test2 is the additional html-cote an Bootstart on - it still doesn't work.

Daniel

Thank you. I have dug into Bootstrap accordion a bit more and it seems the tab won't open only with the link that has ID in it. You need to create special link that opens a tab, for example:

TO OPEN TAB1

Try adding such link somewhere in the content area and then click on it to see if it opens the accordion.

Gina
Themler Support

Hi GIna

Thank you for your help. I have already tried that:
https://mindflow-coach.com/index.php/de/

Under Play Attention there are 2 links, that I have tried (mehr... / noch mehr...):
1) /index.php?option=com_content&view=category&layout=blog&id=14&Itemid=111&tab=2&lang=de
2) https://mindflow-coach.com/index.php/de/offer-de#tab2

Both don't work.
Daniel

Sorry, I can't those links, could you please attach marked screenshot with those?

Gina
Themler Support

Hi Gina

See article with the codes do the accordion-Page (2 Links to the same page)

Daniel

Sorry, I have pasted the example link earlier without code formatting. You need to form the link like this:

<a data-toggle="collapse" data-parent="#accordion" data-target="#tab1 + div" href="#tab1"><span>TO OPEN TAB1</span></a>

Please, try this variant.

Gina

Dear Gina

Sorry, I was not able to read your code in your prior response.

OK, we got one step further. But this works only linked from the same page. I need to link it from the the Home of the website to the offer-section.

I modified your code changing href="#tab1" to href="offer-de#tab1", which opens the right page but not the accordion.

Best regards

Daniel

That's not possible without using external jQuery code.
I can suggest trying this code (to be added to Additional Head HTML):

<script>
$(function(){

    // check if there is a hash in the url
    if ( window.location.hash != '' )
    {
        // remove any accordion panels that are showing (they have a class of 'in')
        $('.collapse').removeClass('in');

        // show the panel based on the hash now:
        $(window.location.hash + '.collapse').collapse('show');
    }

});
</script>

Gina

Hi Gina

I did it like you suggested (see picture) - but it still doesn't work.

Daniel