[meatheadParticipant]

I have some accordions and some tabs on my home page DJTees
I have links which open my tabs using this query:-

jQuery(function($){
  
  $(document).ready(function() {
     x_scroll_to_tab($, $('.x-nav-tabs .x-nav-tabs-item a[href="#' + location.href.split("#").slice(-1)[0] + '"]') );
  });

  $('.link_to_tab').click(function(e){
    e.preventDefault();
    x_scroll_to_tab($, $('.x-nav-tabs .x-nav-tabs-item a[href="#' + $(this).attr('href').split("#").slice(-1)[0] + '"]'));
  });

});

function x_scroll_to_tab($, tab_nav) {
            $(tab_nav).click();
            $('html,body').animate({scrollTop: jQuery(tab_nav).offset().top - ( jQuery('.x-navbar').height() + 0 ) - jQuery('header.masthead').height() },700 ,'swing');
}

var $document = jQuery(document),
    $nav = jQuery('.home .x-navbar'),
    className = 'x-navbar-fixed-top';

$document.scroll(function() {
  if ($document.scrollTop() >= 50) {
    $nav.addClass(className);
  } else {
    $nav.removeClass(className);
  }
});  

and class link_to_tab. All the tabs have #tab-1 #tab-2 etc, anchors.

I need to do the same with my accordions.
Here is the test link to scroll to, and open the accordion on my drop down menu:-

<li><a href="#collapse-1" class="link_to_tab">What we're about</a></li>

How do I alter the query to link/open the accordion?
Thanks.

[ZeshanMember]

Hi there,

Thanks for writing in!

Please review this thread: https://theme.co/x/member/forums/topic/open-accordion-from-link/#post-65132

Thanks!

[meatheadParticipant]

Thanks, but I have tried the code in the link suggested, but it didn’t work for accordions or tabs – and yes, I changed the id’s etc. to match the code. (Since changed them back)
The code I sent in my first question works for my tabs, do you know what I can add to this to make it link to the accordions?

[FriechModerator]

Hi There,

Thanks for writing in! Regretfully, we cannot provide support for a third party scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s script.

Thank you for your understanding.

[meatheadParticipant]

The script I used was suggested by your staff/experts to someone else on your forum https://theme.co/x/member/forums/topic/links-to-nav-tabs/page/2/ for answering a similar question, so it is not a third party script.
This is why I used it.

I had already tried the other script https://theme.co/x/member/forums/topic/open-accordion-from-link/#post-65132 that you suggested, but the question/answers were very fractured and specific to the other person’s question.
I really need a very clear answer/script that directly applies to my question.
The script you suggested does not work.
Could it be out of date due to updates?

[LelyModerator]

Hello There,

Thank you for your patience and sorry the link we have suggested didn’t work for you.
Please check if your plugins is updated.
Meanwhile, would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[meatheadParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

I’ve updated your original code to work with accordions and added in your Customizer. I’ve also created a test page: http://46.32.241.211/djtees.com/store/example-accordion-link/

The code for accordions is following:

jQuery(function($){
  
  $(document).ready(function() {
    x_scroll_to_accordion($, $('.x-accordion-toggle[href="#' + location.href.split("#").slice(-1)[0] + '"]') );
  });

  $('.link_to_accordion').click(function(e){
    e.preventDefault();
    x_scroll_to_accordion($, $('.x-accordion-toggle[href="#' + $(this).attr('href').split("#").slice(-1)[0] + '"]'));
  });

});

function x_scroll_to_accordion($, acc_nav) {
  $(acc_nav).click();
  $('html,body').animate({scrollTop: jQuery(acc_nav).offset().top - ( jQuery('.x-navbar').height() + 0 ) - jQuery('header.masthead').height() },700 ,'swing');
}

var $document = jQuery(document),
    $nav = jQuery('.home .x-navbar'),
    className = 'x-navbar-fixed-top';

$document.scroll(function() {
  if ($document.scrollTop() >= 50) {
    $nav.addClass(className);
  } else {
    $nav.removeClass(className);
  }
});  

You need to follow the same method as for tabs.

Thanks!

[meatheadParticipant]

Thanks very much for your help, works great now!

[NicoModerator]

You’re most welcome.

Let us know if you need anything else.

Cheers!

[Jeroen BParticipant]

I use this function on my website, but how can I combine it with something like this:

$(‘.class-of-accordion-item’).click(function(){
revapi2.revshowslide(2);
});

what this does is show the second slide of the revolution slider on that page while still opening the accordion.
The only problem is, if i want to open the accordion by surfing to the url http://example.com/subpage#accordion-item, it does not open automatically anymore so combining it with the open accordion function of this thread does not work… any ideas/solutions?

[crueschParticipant]

This reply has been marked as private.

[Jeroen BParticipant]

I’m going to rephrase my question to the following:

if I open http://example.com/#id-of-accordion my toggle opens, but i also want my revolution slider to be at the right position for instance: #id-of-accordion-1 is linked with the second slide so the second slide should be shown when linking directly to that toggle item.

[RadModerator]

Hi there,

Hmm, not sure if I understand it correctly. You wish to initiate sliding effect depending on menu UR ID? Or how does the slider connected to the accordion?

Thanks!

[Jeroen BParticipant]

the toggle now initiates a call to another slide ‘page’ so first toggle initiates slide nr 1, second toggle open makes the slider go to slide number two.. it’s al working but if i would go straight to an open toggle with for instance copy paste of the url, the toggle opens but i cant seem to find how to load the right slide in de revslider.

What is does now is work on a click event which works how it should, it does not work when i make a check onload and then try to load the correct revslider slide… (i think because of the timing of the script firing).

[Author]

Posts