#77874 Jump to section – open accordion

Landing Forums JupiterX WordPress Theme Jump to section – open accordion

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • carlo.isles-d04dc158

    Hi,

    Two items:

    1. HREF TO ACCORDION

      We have this FAQ page that has many accordions, we would like to link to these certain accordions from a different page via URL for example:

      https://website.com/#accordion1

      This URL works, it scrolls down to the specific accordion, but it doesn’t open that accordion. Could you provide a guide on how to achieve this? Is it configurable?

    2. JUMP TO ACCORDION SECTION

      In the FAQ page, we have certain FAQ items that need to jump to certain accordion, however, it seems like it doesn’t jump exactly to the target accordion. It passes by.

    This is kind of urgent, please respond asap. Thank you so much!

    Danish Iqbal Support Team

    Hello Carlo,

     

    By default, this thing is not available in the theme but I can try some custom coding.

    Could you please share the exact page URL on which you have added the FAQ’s with the accordions so that I can check whether it’s possible or not?

    Also, please share the WP Login details in a private reply?

     

    Regards.

    Private
    carlo.isles-d04dc158
    This reply has been marked as private.
    Private
    carlo.isles-d04dc158
    This reply has been marked as private.
    Danish Iqbal Support Team

    Hello Carlo,

     

    Thank you for sharing the details.

     

    1 – I understood this issue and to solve this, I added the below JS to Jupiter X -> Control Panel -> Settings

     

    <script>
    
    var target = window.location.hash,
    target = target.replace('#', '');
    
    window.location.hash = "";
    
    $(document).ready(function() {
    if(!$("#" + target).hasClass("elementor-active")){
    $("#" + target).trigger("click");
    }
    });
    
    $(window).on('load', function() {
    if (target) {
    setTimeout(function() {
    $('html, body').animate({
    scrollTop: $("#" + target).offset().top - 140
    }, 700, 'swing', function () {});
    }, 300);
    }
    });
    
    </script>

     

    Please clear your browser cache and then try this test URL https://smartpadalastg.wpengine.com/faqs/#elementor-tab-title-1363

     

    2 – Unfortunately, I could not understand the second issue. Could you please explain it more?

     

    Regards.

    carlo.isles-d04dc158

    Hi Danish,

    I saw your code and it’s working great! Thanks for the help! This is appreciated! 🙂 I will look into item 2.

    Again, thanks!

     

    Alexander Support Team

    Hello,

     

    You are welcome.

    Feel free to create a new topic if you have any other questions.

     

    Regards.

    Private
    carlo.isles-d04dc158
    This reply has been marked as private.
    Danish Iqbal Support Team

    Hello Carlo,

     

    1 – On the FAQ page, when I click on the “Smart Padala” button, it goes to the Smart Padala section.

     

    2 – On the fee calculate page, when I click on the View Fees button, it properly opens the link in a new tab and scrolls to the respective section.

     

    I’m not sure if I understood your request completely. Is it possible you can share a video explaining your requests?

     

    Regards.

    Private
    carlo.isles-d04dc158
    This reply has been marked as private.
    Private
    carlo.isles-d04dc158
    This reply has been marked as private.
    carlo.isles-d04dc158

    Hi,

    Do we have update on this please? Thank you.

    Danish Iqbal Support Team

    Hello Carlo,

     

    Sorry for the late reply.

    I checked the video and I get your point.

    I don’t have the live site’s WP Login details. Should I modify the code on the staging site?

     

    Regards.

    Private
    carlo.isles-d04dc158
    This reply has been marked as private.
    Danish Iqbal Support Team

    Hello Carlo,

     

    To do this, I added the below JS:

     

    jQuery(".custom-scroll").click(function(){
    event.preventDefault();
    
    var targetID = $(this).attr('href').split('#')[1];
    
    var stickyHeaderHeight = jQuery(".jupiterx-header-custom").outerHeight();
    
    var adminBarHeight = jQuery("#wpadminbar").outerHeight();
    
    var totalExtraHeight = stickyHeaderHeight + adminBarHeight + 2;
    
    if(!$("#" + targetID).hasClass("elementor-active")){
    $("#" + targetID).trigger("click");
    }
    
    setTimeout(function() {
    $('html, body').animate({
    scrollTop: $("#" + targetID).offset().top - totalExtraHeight
    }, 700, 'swing', function () {});
    }, 500);
    });

     

    Note that there is 1 thing that you have to do. The each link that you have added inside the accordions, you have to add this custom class (custom-scroll) to those links so that my code knows that the link has been clicked.

    For the test, I added this custom class to the link that you showed in the demo and it’s scrolling perfectly to the respective accordion.

     

    Please let me know what else do you require help with.

     

    Regards.

    Private
    carlo.isles-d04dc158
    This reply has been marked as private.
    Private
    carlo.isles-d04dc158
    This reply has been marked as private.
    Private
    Tatyana Hutsol Support Team
    This reply has been marked as private.
Viewing 18 posts - 1 through 18 (of 18 total)
You must be logged in to reply to this topic. Login