CMS Development

viralniral
Participant

How to auto-open an accordion upon clicking a link?

SOLVE

I'm looking for some help on how to auto-open an accordion module upon clicking a link (on an image). See image below for what I'm looking for specifically. Here is the Jscript:

 

    $('.accordion-content').hide();
    $('.expand .accordion-content').show();
    $('.accordion-title').click(function(){
        $(this).closest('.hs_cos_wrapper_type_custom_widget').siblings().find('.hs-accordion-wrapper').removeClass('expand');
        $(this).parent().addClass('expand');
        $(this).next().slideToggle(250);
        var title = $('.accordion-title');
        title.each(function(){
        $(this).click(function(){
        $(this).parent().toggleClass('expand');
        });
       });        
    });
});

$(window).load(function() {
   $(".hs-tab-content").each(function(b) {
       var a = $(this).closest(".hs_cos_wrapper_type_custom_widget").html();
       $(this).closest(".hs_cos_wrapper_type_custom_widget").before(a);
       $(this).closest(".hs_cos_wrapper_type_custom_widget").remove()
   });
   $(".hs-tab-content").wrapAll('<div class="hs-tabber-content"></div>');
   $(".hs-tabber-content").wrapAll('<div class="hs-tabber-wrap"></div>');
   $(".hs-tabber-content .hs-tab-content").each(function(a, b) {
       $(b).attr("id", "tab-" + a);
       var c = $(b).find(".tab-list").html();
       //$(this).find('.tab-list').remove();
       $(b).closest(".hs-tabber-wrap").append('<li class="hs-tab  col-3"><a> ' + c + " </a></li>")
   });
   $(".hs-tab-content > h3.hs-tab-title").remove();
   $(".hs-tabber-wrap").children("li").wrapAll('<ul class="clearfix hs-tabber-tabs"></ul>');
   ul = $(".hs-tabber-tabs");
   ul.children().each(function(b, a) {
       ul.append(a)
   });
   $("ul.hs-tabber-tabs li:first").addClass("active");
    $('.hs-tab-content:first').addClass("active");
    $(".hs-tab-content").not(".active").hide();
    $(".hs-tabber-tabs a").each(function(b, c) {
       $(c).attr("href", "#tab-" + b);
       var a = $(c).attr("href");
       $(this).click(function(d) {
           d.preventDefault();
           if (!$(this).parent().hasClass("active")) {
               $(this).parent().addClass("active").siblings().removeClass("active");
               $(a).fadeIn().addClass("active").siblings().removeClass("active").hide();
           }
       });
   });
});

 

each icon should be linked in a way that when it&#39;s clicked on, the corresponding module below should open and auto-scroll to it.

0 Upvotes
1 Accepted solution
EricSalvi
Solution
HubSpot Employee
HubSpot Employee

How to auto-open an accordion upon clicking a link?

SOLVE

Hey @viralniralNot too sure what your code for the image looks like but if you want an image to be clicked which will open up an accordion you will need to adjust the JavaScript that you provided and then add a class to the image itself so if the image had a class called "image-click" then your JavaScript may look something like this,

    $('.accordion-content').hide();
    $('.expand .accordion-content').show();
    $('.image-click').click(function(){
        $(this).closest('.hs_cos_wrapper_type_custom_widget').siblings().find('.hs-accordion-wrapper').removeClass('expand');
        $(this).parent().addClass('expand');
        $(this).next().slideToggle(250);
        var title = $('.image-click');
        title.each(function(){
        $(this).click(function(){
        $(this).parent().toggleClass('expand');
        });
       });        
    });
});

Now I am no expert especially with your set up but the way the JavaScript will work is it will be waiting for a click on the image with a class of ".image-click" and then look for the closest ".hs_cos_wrapper_type_custom_widget". I would assume that the image will target the closest element to it with the previously mentioned class.

I hope this helps. A developer should know how to do this and may require you to reach out to one. 

View solution in original post

0 Upvotes
1 Reply 1
EricSalvi
Solution
HubSpot Employee
HubSpot Employee

How to auto-open an accordion upon clicking a link?

SOLVE

Hey @viralniralNot too sure what your code for the image looks like but if you want an image to be clicked which will open up an accordion you will need to adjust the JavaScript that you provided and then add a class to the image itself so if the image had a class called "image-click" then your JavaScript may look something like this,

    $('.accordion-content').hide();
    $('.expand .accordion-content').show();
    $('.image-click').click(function(){
        $(this).closest('.hs_cos_wrapper_type_custom_widget').siblings().find('.hs-accordion-wrapper').removeClass('expand');
        $(this).parent().addClass('expand');
        $(this).next().slideToggle(250);
        var title = $('.image-click');
        title.each(function(){
        $(this).click(function(){
        $(this).parent().toggleClass('expand');
        });
       });        
    });
});

Now I am no expert especially with your set up but the way the JavaScript will work is it will be waiting for a click on the image with a class of ".image-click" and then look for the closest ".hs_cos_wrapper_type_custom_widget". I would assume that the image will target the closest element to it with the previously mentioned class.

I hope this helps. A developer should know how to do this and may require you to reach out to one. 

0 Upvotes