Avada Forums Community Forum Open toggle by link

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • mcouts
    Participant
    Post count: 1

    Is there nay way to target a specific toggle by link?

    I am using the toggles for FAQs and want to send the user to a specific toggle from a given page.

    JonW_Fergus
    Participant
    Post count: 6

    I’m looking for this option as well. Would be very useful.

    wizard247
    Participant
    Post count: 6

    Has anyone worked this out yet? Would love to be able to do this the same way you can link to a tab.

    teretere2000
    Participant
    Post count: 2

    I have the same problem , anyone make it work? thanks

    sterlingzzzz
    Participant
    Post count: 1

    The same for me. Does anybody has an idea how to send users to a specific toggle?

    volksman3
    Participant
    Post count: 1

    Did anyone find a solution for this?

    tecticsolutions
    Participant
    Post count: 1

    I find a solution with this script:

    <script type="text/javascript">
    
    function getUrlVars() {
        var vars = {};
        var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
            vars[key] = value;
        });
        return vars;
    }
    
    (function($) {
    
     	$(document).ready (function() {
    		var number = getUrlVars()["x"];
    	$('a[data-target="'+number+'"]').trigger( "click" );
    
    });
    
    })( jQuery );
    </script>

    Then you pass in the url the var ?x=#datatargetnumber and it opens

    karisharp
    Participant
    Post count: 4

    Not sure if this is the correct way to be doing this, but this worked for me to set a button to open an accordion. You could also use this for for a text link by adding the class to the link:

    1. Set “open-accordion” as class on button
    2. Set URL on button to accordion link (a long string something like #5a90d1fc3d24f5b92, find it when inspecting the page)

    3. Add jQuery in Theme Options, Advanced, Code Fields, Space before </body>:

    <script type="text/javascript">
     	jQuery(document).ready (function() {
    	  jQuery(".open-accordion").click(function() {  //use a class, since your ID gets mangled
              var anchorlink = jQuery(".open-accordion").attr('href').replace(/^.*?/,'');
              jQuery(anchorlink+".panel-collapse.collapse").addClass("in");  //add the class to the clicked element
              jQuery('a[data-target="'+anchorlink+'"]').addClass("active");  //add the class to the clicked element
              console.log('anchorlink='+anchorlink);
    	});
    });
    </script>
    karisharp
    Participant
    Post count: 4

    Corrected code for above:

    <script type="text/javascript">
     	jQuery(document).ready (function() {
    	  jQuery(".open-accordion").click(function() {  //use a class, since your ID gets mangled
              var anchorlink = jQuery(this).attr('href').replace(/^.*?/,'');
              jQuery(anchorlink+".panel-collapse.collapse").addClass("in");  //add the class to the clicked element
              jQuery('a[data-target="'+anchorlink+'"]').addClass("active");  //add the class to the clicked element
              console.log('anchorlink='+anchorlink);
    	});
    });
    </script>
    sdawebby
    Participant
    Post count: 1

    Thank you karisharp, your script worked for me but I had to add one css rule to improve the function. On testing I found that the anchor link would work correctly the first time, but if I collapsed the toggle and then clicked the anchor link again, the toggle section would display but with the height of “0px” so the content overlapped the elements below. That’s because collapsing a toggle adds an inline style to the content to make the height 0.

    So to fix that I added the following to my custom CSS:

    .panel-collapse.collapse.in{
        height:auto!important;
    }
    madbirdesign
    Participant
    Post count: 8

    Thank you karisharp – I’m trying to get this to work. I used the corrected code referenced in the Theme Options » Advanced » Space before </body>

    Are you using it with the Toggles element? When I set up the button and click on the link, it doesn’t work and I get an error in the Chrome console:

    jquery.js?ver=1.12.4-wp:2 Uncaught Error: Syntax error, unrecognized expression: http://localhost/discoverycwa/admin-framework/#440fcf28e0acd7ded.panel-collapse.collapse
    at Function.ea.error (jquery.js?ver=1.12.4-wp:2)

    hsale
    Participant
    Post count: 3

    Hi @tecticsolutions, @Karisharp, @sdawebby, could you please elaborate a little bit more on how to apply these fixes? I am getting an error and I am not sure if I am missing a step, any help would be greatly appreciated, thanks.

    hsale
    Participant
    Post count: 3

    Hi, did you get this to work by any chance?

    marklchaves
    Participant
    Post count: 873

    Here’s a live vanilla JavaScript example if anyone’s interested. You’ll probably want to pay attention to the anchorToggle() function.

    Enjoy!

    Hirsala
    Participant
    Post count: 2

    Hi karisharp, thank you very much it works great. But when I try to link to the Accordion Tab from another page, it doesn’t work. Is there a solution for that too? Thank you for all the helpful answers!

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.