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

Developer Support CMS Development
1

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();
 }
 });
 });
});

2

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.