通过从同一页面内的链接调用其锚 id 来扩展手风琴？

Question

I'm trying to get an accordion open from its id, called over a link on a text. when I click on the anchor link from other pages of my website or directly enter its anchor url it works perfectly as supposed to (scrolling down to accordion position and opening it) but it doesn't open the accordion when i click on anchor links within the same page , it just scrolls to the location of accordion.

I tried every suggested answer on stackoverflow to similar questions like this one .

This is my snippet, in this example everything is like my website and "go" link only scrolls the page to the accordion but it doesn't open it.

Thank you for your time.

 $(document).ready(function() { //toggle the component with class accordion_body $(".accordion_head").click(function() { $(this).removeClass('coll-back'); if ($('.accordion_body').is(':visible')) { $(".accordion_body").slideUp(300); $(".plusminus").text('+'); $(this).removeClass('coll-back'); $('.rmv-cls').removeClass('coll-back'); } if($(this).next(".accordion_body").is(':visible')) { $(this).next(".accordion_body").slideUp(300); $(this).children(".plusminus").text('+'); $(this).removeClass('coll-back'); }else { $(this).next(".accordion_body").slideDown(300); $(this).children(".plusminus").text(''); $(this).children(".plusminus").append('<hr class="hr-clc">'); $(this).toggleClass('coll-back'); $(this).addClass('rmv-cls'); } }); }); $(document).ready(function(){ var hash = window.location.hash; if (hash) { var element = $(hash); if (element.length) { element.trigger('click'); } } }); $('.accordion_body').on('click', function(){ $( ".accordion_body" ).acc-main({active:0}); }); $('.accordion_body').acc-main({ //... options collapsible: false }); $(function () { $(".tab-content").hide().first().show(); $(".inner-nav li:first").addClass("active"); $(".inner-nav a").on('click', function (e) { e.preventDefault(); $(this).closest('li').addClass("active").siblings().removeClass("active"); $($(this).attr('href')).show().siblings('.tab-content').hide(); }); var hash = $.trim( window.location.hash ); if (hash) $('.inner-nav a[href$="'+hash+'"]').trigger('click'); }); var hash = window.location.hash; var thash = hash.substring(hash.lastIndexOf('#'), hash.length); $('.accordion-main').find('a[href*='+ thash + ']').closest('h3').trigger('click') var scrollToAndActivate = function(event) { event.preventDefault(); var tabCheckboxId = this.getAttribute("href"); var tabCheckbox = document.querySelector(tabCheckboxId); if (tabCheckbox) { tabCheckbox.checked = true; tabCheckbox.scrollIntoView(true); } }; var allTopBarLinks= document.getElementsByClassName("announcement-bar--link"); for (var i = 0; i < allTopBarLinks.length; i++) { allTopBarLinks[i].addEventListener('click', scrollToAndActivate); }

 .gotext{font-size:100px;}.acc-main { padding: 40px 0px 80px; color: #000; }.container { max-width: 790px; margin: 0 auto; width: 100%; padding: 0 15px; }.pockets-main h1 { font-size: 60px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; text-align: center; color: #111; margin: 0 0px 35px; }.intro-cont h3{ font-size: 35px; font-weight: 600; color: #111; margin: 50px 0; }.kind h2{ text-align:center; font-size: 45px; font-weight: 600; color: #111; margin: 50px 0 30px; } /*accordion*/.accordion-main{ margin-bottom:36px; }.accordion-main:last-child.accordion_body{ padding-bottom: 0; }.accordion_head { background-color: #111; color: #fff; cursor: pointer; font-size: 24px; padding: 12px 25px; border-radius: 5px; border:1px solid 29705a; font-weight: normal; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; }.accordion_body { background: transparent; font-size: 18px; text-align: center; padding: 50px 110px 5px; }.accordion_body img{ width: 100%; max-width: 230px; margin-bottom: 30px; }.accordion_body p { margin: 0px; color: #000000; }.accordion_body h3, .div-bott h3{ font-size: 28px; font-weight: 600; margin: 15px 0; color: #1e352e; }.div-bott h3{ font-size: 35px; }.div-bott{ text-align:center; }.div-bott p{ font-size:24px; }.plusminus { float: right; font-size: 36px; margin-top: -9px; }.coll-back{ background-color: #fff; color: #111; border:1px solid #111; }.hr-clc{ height: 2px; background: #111; margin-top: 22px; width: 17px; padding: 0; border: 0; margin-left: -20px; } /*media queries*/ @media (min-width:992px) and (max-width:1100px){.pockets-main p { font-size: 22px; width: 684px; margin:0 auto; margin-bottom: 20px;important. }:accordion_body { padding; 35px 40px 5px. }:accordion_body img { max-width; 205px: margin-bottom; 20px: } } @media (min-width: 768px) and (max-width. 991px){:pockets-main { padding; 30px 15px. }:pockets-main h1 { font-size; 45px: margin; 0 0px 20px. }:pockets-main p { font-size; 20px:important; margin-bottom: 20px;important: width; 600px. margin, 0 auto. }:intro-cont h3; :div-bott h3{ font-size; 30px. margin: 35px 0; }:kind h2 { font-size; 30px. margin: 35px 0 30px; }:accordion_head { font-size; 20px. padding: 11px 18px; }:plusminus { font-size; 27px. margin-top: -5px; }.accordion-main { margin-bottom: 24px; }:hr-clc { margin-top; 16px: width; 15px. margin-left: -15px; }:accordion_body { font-size; 18px. padding: 30px 40px 5px; }:accordion_body img { width; 100%: max-width; 185px. margin-bottom: 20px; }:accordion_body h3 { font-size: 24px. } } @media (min-width: 576px) and (max-width; 767px){.pockets-main { padding: 35px 15px; }:pockets-main h1 { font-size; 40px. margin: 0 0px 30px; }:pockets-main p { font-size; 18px:important; margin-bottom: 20px;important. width, 400px. margin: 0 auto; }:intro-cont h3; :div-bott h3{ font-size; 26px: width. 400px; margin. 30px auto: line-height; 1.2:important; }:div-bott h3{ width;unset. }:kind h2 { font-size; 26px: margin; 30px 0 30px. }:accordion_head { font-size; 20px. padding: 10px 15px; }:accordion-main { margin-bottom; 25px. }:plusminus { font-size; 30px. margin-top: -5px; }:accordion_body { padding; 30px 25px 5px. }:accordion_body img { max-width; 170px: margin-bottom; 20px. }:hr-clc { margin-top; 17px: width; 16px: }.accordion_body h3 { font-size: 22px; margin. 15px 0: } } @media (max-width;575px){:pockets-main{ padding;15px 0px. }:pockets-main h1 { font-size; 30px: margin; 0 0px 15px. },pockets-main p { font-size. 16px,important. margin-bottom: 15px;important: };intro-cont h3: ;kind h2. :div-bott h3{ margin; 30px 0px: line-height. normal:important; font-size:24px; }.accordion_head { font-size: 18px; padding. 8px 12px }:plusminus { font-size; 27px: margin-top; -7px. }:accordion-main { margin-bottom; 22px: };accordion_body { font-size. 18px: padding; 20px 20px 5px: };accordion_body img { max-width: 150px; margin-bottom. 20px: };accordion_body h3 { font-size: 18px; margin: 10px 0; line-height: normal; } .hr-clc { height: 2px; margin-top: 16px; width: 15px; margin-left: -15px; } }

 <div><a class="gotext" href="#go">go</a></div> <div class="acc-main"> <div class="container"> <div class="kind"> <h2>space</h2> <h2>space</h2> <h2>space</h2> <h2>space</h2> <h2>space</h2> <h2>space</h2> <h2>space</h2> <h2>space</h2> <h2>space</h2> <h2>space</h2> <h2>space</h2> <h2>space</h2> <div class="accordion_container"> <div class="accordion-main"> <div href="go" id="go" class="accordion_head">Accordian 1<span class="plusminus">+</span></div> <div class="accordion_body" data-external-trigger href="#go" id="go" style="display: none;"> <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p> </div> </div> <div class="accordion-main"> <div class="accordion_head">Accordion 2 <span class="plusminus">+</span></div> <div class="accordion_body" style="display: none;"> <p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p> </div> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 1

 $(document).ready(function() { //toggle the component with class accordion_body $(".accordion_head").click(function() { $(this).removeClass('coll-back'); if ($('.accordion_body').is(':visible')) { $(".accordion_body").slideUp(300); $(".plusminus").text('+'); $(this).removeClass('coll-back'); $('.rmv-cls').removeClass('coll-back'); } if($(this).next(".accordion_body").is(':visible')) { $(this).next(".accordion_body").slideUp(300); $(this).children(".plusminus").text('+'); $(this).removeClass('coll-back'); }else { $(this).next(".accordion_body").slideDown(300); $(this).children(".plusminus").text(''); $(this).children(".plusminus").append('<hr class="hr-clc">'); $(this).toggleClass('coll-back'); $(this).addClass('rmv-cls'); } }); }); $(document).ready(function(){ var hash = window.location.hash; if (hash) { var element = $(hash); if (element.length) { element.trigger('click'); } } }); $('.accordion_body').on('click', function(){ $( ".accordion_body" ).acc-main({active:0}); }); $(function () { $(".tab-content").hide().first().show(); $(".inner-nav li:first").addClass("active"); $(".inner-nav a").on('click', function (e) { e.preventDefault(); $(this).closest('li').addClass("active").siblings().removeClass("active"); $($(this).attr('href')).show().siblings('.tab-content').hide(); }); var hash = $.trim( window.location.hash ); if (hash) $('.inner-nav a[href$="'+hash+'"]').trigger('click'); }); var scrollToAndActivate = function(event) { event.preventDefault(); var tabCheckboxId = this.getAttribute("href"); var tabCheckbox = document.querySelector(tabCheckboxId); if (tabCheckbox) { tabCheckbox.checked = true; tabCheckbox.scrollIntoView(true); } }; var allTopBarLinks= document.getElementsByClassName("announcement-bar--link"); for (var i = 0; i < allTopBarLinks.length; i++) { allTopBarLinks[i].addEventListener('click', scrollToAndActivate); } $( ".gotext" ).on( "click", function() { $("#go").click(); });

 .gotext{font-size:100px;}.acc-main { padding: 40px 0px 80px; color: #000; }.container { max-width: 790px; margin: 0 auto; width: 100%; padding: 0 15px; }.pockets-main h1 { font-size: 60px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; text-align: center; color: #111; margin: 0 0px 35px; }.intro-cont h3{ font-size: 35px; font-weight: 600; color: #111; margin: 50px 0; }.kind h2{ text-align:center; font-size: 45px; font-weight: 600; color: #111; margin: 50px 0 30px; } /*accordion*/.accordion-main{ margin-bottom:36px; }.accordion-main:last-child.accordion_body{ padding-bottom: 0; }.accordion_head { background-color: #111; color: #fff; cursor: pointer; font-size: 24px; padding: 12px 25px; border-radius: 5px; border:1px solid 29705a; font-weight: normal; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; }.accordion_body { background: transparent; font-size: 18px; text-align: center; padding: 50px 110px 5px; }.accordion_body img{ width: 100%; max-width: 230px; margin-bottom: 30px; }.accordion_body p { margin: 0px; color: #000000; }.accordion_body h3, .div-bott h3{ font-size: 28px; font-weight: 600; margin: 15px 0; color: #1e352e; }.div-bott h3{ font-size: 35px; }.div-bott{ text-align:center; }.div-bott p{ font-size:24px; }.plusminus { float: right; font-size: 36px; margin-top: -9px; }.coll-back{ background-color: #fff; color: #111; border:1px solid #111; }.hr-clc{ height: 2px; background: #111; margin-top: 22px; width: 17px; padding: 0; border: 0; margin-left: -20px; } /*media queries*/ @media (min-width:992px) and (max-width:1100px){.pockets-main p { font-size: 22px; width: 684px; margin:0 auto; margin-bottom: 20px;important. }:accordion_body { padding; 35px 40px 5px. }:accordion_body img { max-width; 205px: margin-bottom; 20px: } } @media (min-width: 768px) and (max-width. 991px){:pockets-main { padding; 30px 15px. }:pockets-main h1 { font-size; 45px: margin; 0 0px 20px. }:pockets-main p { font-size; 20px:important; margin-bottom: 20px;important: width; 600px. margin, 0 auto. }:intro-cont h3; :div-bott h3{ font-size; 30px. margin: 35px 0; }:kind h2 { font-size; 30px. margin: 35px 0 30px; }:accordion_head { font-size; 20px. padding: 11px 18px; }:plusminus { font-size; 27px. margin-top: -5px; }.accordion-main { margin-bottom: 24px; }:hr-clc { margin-top; 16px: width; 15px. margin-left: -15px; }:accordion_body { font-size; 18px. padding: 30px 40px 5px; }:accordion_body img { width; 100%: max-width; 185px. margin-bottom: 20px; }:accordion_body h3 { font-size: 24px. } } @media (min-width: 576px) and (max-width; 767px){.pockets-main { padding: 35px 15px; }:pockets-main h1 { font-size; 40px. margin: 0 0px 30px; }:pockets-main p { font-size; 18px:important; margin-bottom: 20px;important. width, 400px. margin: 0 auto; }:intro-cont h3; :div-bott h3{ font-size; 26px: width. 400px; margin. 30px auto: line-height; 1.2:important; }:div-bott h3{ width;unset. }:kind h2 { font-size; 26px: margin; 30px 0 30px. }:accordion_head { font-size; 20px. padding: 10px 15px; }:accordion-main { margin-bottom; 25px. }:plusminus { font-size; 30px. margin-top: -5px; }:accordion_body { padding; 30px 25px 5px. }:accordion_body img { max-width; 170px: margin-bottom; 20px. }:hr-clc { margin-top; 17px: width; 16px: }.accordion_body h3 { font-size: 22px; margin. 15px 0: } } @media (max-width;575px){:pockets-main{ padding;15px 0px. }:pockets-main h1 { font-size; 30px: margin; 0 0px 15px. },pockets-main p { font-size. 16px,important. margin-bottom: 15px;important: };intro-cont h3: ;kind h2. :div-bott h3{ margin; 30px 0px: line-height. normal:important; font-size:24px; }.accordion_head { font-size: 18px; padding. 8px 12px }:plusminus { font-size; 27px: margin-top; -7px. }:accordion-main { margin-bottom; 22px: };accordion_body { font-size. 18px: padding; 20px 20px 5px: };accordion_body img { max-width: 150px; margin-bottom. 20px: };accordion_body h3 { font-size: 18px; margin: 10px 0; line-height: normal; } .hr-clc { height: 2px; margin-top: 16px; width: 15px; margin-left: -15px; } }

 <div><a class="gotext" href="#go">go</a></div> <div class="acc-main"> <div class="container"> <div class="kind"> <h2>space</h2> <h2>space</h2> <h2>space</h2> <h2>space</h2> <h2>space</h2> <h2>space</h2> <h2>space</h2> <h2>space</h2> <h2>space</h2> <h2>space</h2> <h2>space</h2> <h2>space</h2> <div class="accordion_container"> <div class="accordion-main"> <div href="go" id="go" class="accordion_head">Accordian 1<span class="plusminus">+</span></div> <div class="accordion_body" data-external-trigger href="#go" id="go" style="display: none;"> <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p> </div> </div> <div class="accordion-main"> <div class="accordion_head">Accordion 2 <span class="plusminus">+</span></div> <div class="accordion_body" style="display: none;"> <p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p> </div> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

You had a few JS errors in there, but basically I think that does what you need?

$( ".gotext" ).on( "click", function() {
$("#go").click(); 
});

That just fakes a click on the first accordion title when you click the "go"