Question posted in 
I have an html page with accordion sections with buttons btn-acc-tab. The sections acc-tab open when a user clicks on a button, and each section contains links tab-link that can be active. The sections open and close using the JQuery scripts shown below. I’m trying to have a section acc-tab collapse with a currently active link open when a page loads by adding a class show, not waiting for a user to click. Most answers I could find here deal with activating a show class on click or some other event. Simply substituting event for onload hasn’t worked for me. I know I am missing something simple, but I’ve banged my head on the wall long enough to know that I am not going to see it on my own. Your help will be greatly appreciated.
HTML code:
<div class="container">
<div class="accordion" id="accordion_Foo">
<div class="card">
<div class="card-header" id="heading_Foo_Bar">
<button class="btn btn-acc-tab" type="button" id="button_Foo_Bar" data-toggle="collapse" data-target="#collapse_Foo_Bar" aria-expanded="true" aria-controls="collapse_Foo_Bar">
<h4>Foo Bar</h4>
</button>
</div>
<div class="acc-tab collapse show" id="collapse_Foo_Bar" aria-labeledby="heading_Foo_Bar" data-parent="#accordion_Foo">
<ul class="tab-list">
<li class="btn tab-link active" data-target="Cat" data-id="button_Foo_Bar" tabindex="0" role="button" aria-expanded="true">
<a class="active" href="/Foo/Foo_Bar/Cat" target="_self">Cat</a>
</li>
<span class="sr-only">(current)</span>
<li class="btn tab-link" data-target="Dog" data-id="button_Foo_Bar" tabindex="0" role="button" aria-expanded="true">
<a class="" href="/Foo/Foo_Bar/Dog" target="_self">Dog</a>
</li>
<li class="btn tab-link" data-target="Mouse" data-id="button_Foo_Bar" tabindex="0" role="button" aria-expanded="true">
<a class="" href="/Foo/Foo_Bar/Mouse" target="_self">Mouse</a>
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header" id="heading_Foo_Foo">
<button class="btn btn-acc-tab" type="button" id="button_Foo_Bar" data-toggle="collapse" data-target="#collapse_Foo_Foo" aria-expanded="true" aria-controls="collapse_Foo_Foo">
<h4>Foo Foo</h4>
</button>
</div>
<div class="acc-tab collapse" id="collapse_Foo_Foo" aria-labeledby="heading_Foo_Foo" data-parent="#accordion_Foo">
<ul class="tab-list">
<li class="btn tab-link active" data-target="Bird" data-id="button_Foo_Foo" tabindex="0" role="button" aria-expanded="true">
<a class="active" href="/Foo/Foo_Foo/Bird" target="_self">Bird</a>
</li>
<span class="sr-only">(current)</span>
<li class="btn tab-link" data-target="Fish" data-id="button_Foo_Foo" tabindex="0" role="button" aria-expanded="true">
<a class="" href="/Foo/Foo_Foo/Fish" target="_self">Fish</a>
</li>
<li class="btn tab-link" data-target="Dinosaur" data-id="button_Foo_Foo" tabindex="0" role="button" aria-expanded="true">
<a class="" href="/Foo/Foo_Foo/Dinosaur" target="_self">Dinosaur</a>
</li>
</ul>
</div>
</div>
</div>
</div>
jQuery scripts:
(function ($) {
$.fn.replaceClass = function (pFromClass, pToClass) {
return this.removeClass(pFromClass).addClass(pToClass);
};
}(jQuery));
function clickAndPress(event) {
if(event.type === 'click'){
return true;
}
else if(event.type === 'keypress'){
var code = event.charCode || event.keyCode;
if((code === 32)|| (code === 13)){
return true;
}
}
else{
return false;
}
};
$(".tab-link").on("click keypress", function(){
if(clickAndPress(event) === true) {
var id = $(this).data('target')
var par_id = $(this).data('id');
$(".tab-content").replaceClass("d-block", "d-none");
$(".sr-only").remove();
$(document.getElementById(id)).replaceClass("d-none", "d-block");
$(".tab-link").removeClass("active");
if ($(".btn-acc-tab").hasClass("active")) {
$(".btn-acc-tab").removeClass("active");
};
$(this).addClass("active");
$(document.getElementById(par_id)).addClass("active");
$('<span class="sr-only">(current)</span>').insertAfter(".active");
}
});
$(document).ready(function(){
var active = $(".tab-link.active").data('target');
$(".acc-tab").addClass("show");
});
Also tried jQuery:
$(this).closest(".btn-acc-tab").addClass("active");
3
Answers
If I understand your problem correctly, what you want is to add
showclass toacc-tab collapseelement if it at least has one element<li>which hasactiveclass on page load right? If so, I think you can just use this code inside the$(document).ready(function(){})function:Full code:
As I can see that URL contains the same data which is required to make the corresponding
acc-tabactive.I am assuming that at a time only one
acc-tabwill be active (in your given HTML 2liof 2 differentacc-tabis active)You can do it like below:
sample working snippet:
You simply need to hide the children of the collapsables that lack the
showclass 🙂Full example: