Add hyperlink to WordPress Accordion Title Using jQuery

Question

I have an accordian on a page I am building at https://therussellcons.wpengine.com/services/ and I am trying to add a hyperlink to the "Train the Trainer" title, but can't seem to figure it out. The title has an empty href since it is used to fire the opening of the accordion, but I need this particular accordion to link to an external url. I've tried many different things, but below is what I've tried last with no luck.

jQuery(document).ready(function(){
    jQuery("#elementor-tab-title-1832").click(function(){
            $("a.elementor-accordion-title").attr("href", "https://www.test.com");
    });
});

Think about what you're doing here. On the click event, you're updating the href attribute. That, then, would require a _second_ click to act as a link. You need to add the href attribute _before_ the click, such as on page load. — isherwood, Nov 01 '21 at 20:14
Now, if you want the first click to just redirect the page, see https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage — isherwood, Nov 01 '21 at 20:17
Instead of changing the href at all, why don't you just redirect the visitor when clicking that link? `window.location.href = "https://www.test.com";` — j08691, Nov 01 '21 at 20:21
@isherwood I followed the link to the other SO thread and was able to add a link with `jQuery("#elementor-tab-title-1832 a").prop('href', 'http://stackoverflow.com')` but now have another problem. The link isn't accessible behind the accordion action. Can you help with this, or should I open a new question? Thanks. — Charles Smith, Nov 01 '21 at 20:32
Well, you haven't really met site standards (see [ask]), and I can't currently see your site because it's blocked. Maybe if you put more stuff here in your question. — isherwood, Nov 01 '21 at 20:36

score 1 · Answer 1 · answered Nov 01 '21 at 20:34

If the number of tab titles is a lot and differents, use a variable like redirectUrl.
Then handle the click event on link by js:

var redirectUrl = "#";
jQuery(document).ready(function(){
    jQuery("#elementor-tab-title-1832").click(function(e){
          redirectUrl = "http://test.com";
    });
    //Others tab-title-xxxx click events
    //...
    //...

    jQuery("a.elementor-accordion-title").click(function(e){
          e.preventDefault();
          window.location.href = redirectUrl;
    });
});

score 0 · Answer 2 · edited Nov 02 '21 at 00:37

0

You can put the onclick attribute in your a tag, like this:

<a href="" onclick="window.open('http://test.com', '_blank')">...</a>

edited Nov 02 '21 at 00:37

Jeremy Caney

7,102
69
48
77

answered Nov 01 '21 at 20:24

Mansour Saleh Borujerdi

1

1

This isn't best practice to put JavaScript on HTML elements, and this solution has probably been mentioned 800 times on SO already. Best to stick with what's actually asked in the question. – isherwood Nov 01 '21 at 20:25

score 0 · Answer 3 · answered Mar 12 '22 at 23:29

You have to click twice with this code to get it to work. Is there some other way to do this?

var redirectUrl = "#";
jQuery(document).ready(function(){
    jQuery("#elementor-tab-title-1832").click(function(e){
          redirectUrl = "http://test.com";
    });
    //Others tab-title-xxxx click events
    //...
    //...

    jQuery("a.elementor-accordion-title").click(function(e){
          e.preventDefault();
          window.location.href = redirectUrl;
    });
});

Add hyperlink to WordPress Accordion Title Using jQuery

3 Answers3