Create a link to open a specific tab on an accordion

dani.schneider
24 Posts
dani.schneider posted this 15 August 2019

Hi Support

I used your code to create an accordion and it works just perfect. Now I would like to create a link from an article that opens a specific tab.
I tried: <a href id>TEST</a> but obviously it doesn't work.
Could you please help me?
Daniel

PS: that's the code I used for the accordion:

<div class>
<div class id>
<a data-toggle data-target class>page 1</a>
</div>
<div class style><div class>
test
</div>
</div>
<div class id>
<a data-toggle data-target class>page 2</a></div>
<div class style><div class>
test 2
</div>
</div>
<div class id>
<a data-toggle data-target class>page 3</a></div>
<div class style>
<div class>
test 3 </div>
</div>
</div>

Hi Support I used your code to create an accordion and it works just perfect. Now I would like to create a link from an article that opens a specific tab. I tried: &lt;a href id&gt;TEST&lt;/a&gt; but obviously it doesn't work. Could you please help me? Daniel PS: that's the code I used for the accordion: &lt;div class&gt; &lt;div class id&gt; &lt;a data-toggle data-target class&gt;page 1&lt;/a&gt; &lt;/div&gt; &lt;div class style&gt;&lt;div class&gt; test &lt;/div&gt; &lt;/div&gt; &lt;div class id&gt; &lt;a data-toggle data-target class&gt;page 2&lt;/a&gt;&lt;/div&gt; &lt;div class style&gt;&lt;div class&gt; test 2 &lt;/div&gt; &lt;/div&gt; &lt;div class id&gt; &lt;a data-toggle data-target class&gt;page 3&lt;/a&gt;&lt;/div&gt; &lt;div class style&gt; &lt;div class&gt; test 3 &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;
Vote to pay developers attention to this features or issue.
21 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 19 August 2019

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 .

Gina
Themler Support

Hello Daniel, ID should have some value, for example: <a class id="example">. Please, note that I suggest adding id to <a> tag. But you can experiment. Then the link in the menu should have this link <a href="#example">. Gina Themler Support
dani.schneider
24 Posts
dani.schneider posted this 19 August 2019

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 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
dani.schneider
24 Posts
dani.schneider posted this 19 August 2019

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

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
Support Team
Support Team posted this 19 August 2019

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

Gina

Please, try adding id="tab0" to the <a> tag below as well. And other IDs to their <a> tags. Gina
dani.schneider
24 Posts
dani.schneider posted this 20 August 2019

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

> Please, try adding id="tab0" to the &lt;a&gt; tag below as well. And other IDs to their &lt;a&gt; tags. &gt; &gt; Gina Isn&#39;t this exactly what I did in my examples: code.jpg &amp; link.jpg? CODE: div class=&quot; bd-menuitem-14&quot; *id=&quot;tab2&quot;* a data-toggle=&quot;collapse&quot; data-target=&quot;*#tab2* + div&quot; class=&quot;&quot;&gt;TITLE ACCORDION 3&lt; link /offer-de#tab2 sorry, that i don&#39;t understand it. daniel link ffer-de#tab2 sorry, that i don&#39;t understand it. daniel link ffer-de#tab2 sorry, that i don&#39;t understand it. daniel link ffer-de#tab2 sorry, that i don&#39;t understand it. daniel
Support Team
Support Team posted this 20 August 2019

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

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
dani.schneider
24 Posts
dani.schneider posted this 21 August 2019

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

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

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

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
dani.schneider
24 Posts
dani.schneider posted this 21 August 2019

Hi Gina

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

Daniel

Hi Gina Still no result. Please find theme in the attached file. Thank you Daniel
Support Team
Support Team posted this 21 August 2019

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

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
Support Team
Support Team posted this 21 August 2019

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

scrollspy.png

Gina

Also, please, note that you need to enable ScrollSpy plugin under Home -> Settings: !scrollspy.png! Gina
dani.schneider
24 Posts
dani.schneider posted this 21 August 2019

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

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
Support Team
Support Team posted this 22 August 2019

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

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: <a data-toggle="collapse" data-parent="#accordion" data-target="#tab1 + div" href="#tab1"><span>TO OPEN TAB1</span></a> Try adding such link somewhere in the content area and then click on it to see if it opens the accordion. Gina Themler Support
dani.schneider
24 Posts
dani.schneider posted this 22 August 2019

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

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
Support Team
Support Team posted this 22 August 2019

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

Gina
Themler Support

Sorry, I can't those links, could you please attach marked screenshot with those? Gina Themler Support
dani.schneider
24 Posts
dani.schneider posted this 22 August 2019

Hi Gina

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

Daniel

Hi Gina See article with the codes do the accordion-Page (2 Links to the same page) Daniel
Support Team
Support Team posted this 23 August 2019

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

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
dani.schneider
24 Posts
dani.schneider posted this 23 August 2019

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

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
Support Team
Support Team posted this 23 August 2019

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

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
dani.schneider
24 Posts
dani.schneider posted this 24 August 2019

Hi Gina

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

Daniel

Hi Gina I did it like you suggested (see picture) - but it still doesn't work. Daniel
You must log in or register to leave comments