Develop Reference

Bootstrap-Wizard | class="active" added to wrong element

I use Bootstrap 4.5.0 and am trying to use this Bootstrap form-wizard (version 1.4.2).
To navigate through the different tabs, the JS should add a class="active" attribute to the current step's <li>-element. Instead - for some reason that I haven't been able to figure out - it adds the attribute to the <li>-element's child element <a>.
This results in the nav-pills not being styled right and the previous/next buttons not working properly.
I manually added/removed the required attributes using Chrome browser's developer tools and confirmed that apparently, everything would work out fine, if the class="active" attribute got attached to the <li>-element.
Any ideas why the class is added to the wrong element and how to prevent it?
Here's my HTML mark-up:
<div id="rootWizard">
<div class="form-bootstrapWizard">
<ul class="bootstrapWizard form-wizard">
<li data-target="#step1" class="active">
<a href="#tab1" data-toggle="tab">
<span class="step">1</span>
<span class="title">Title of Step 1</span>
</a>
</li>
<li data-target="#step2">
<a href="#tab2" data-toggle="tab">
<span class="step">2</span>
<span class="title">Title of Step 2</span>
</a>
</li>
<li data-target="#step3">
<a href="#tab3" data-toggle="tab">
<span class="step">3</span>
<span class="title">Title of Step 3</span>
</a>
</li>
<li data-target="#step4">
<a href="#tab4" data-toggle="tab">
<span class="step">4</span>
<span class="title">Title of Step 4</span>
</a>
</li>
<li data-target="#step5">
<a href="#tab5" data-toggle="tab">
<span class="step">5</span>
<span class="title">Title of Step 5</span>
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
This is how I initialize the wizard within the document.ready()-function:
$('#rootWizard').bootstrapWizard({
tabClass: 'bootstrapWizard'
});

How to check (select) element in ARIA-menuitemcheckbox (javascript)?

I have the following HTML item (menubox):
<div class="uiContextualLayerPositioner uiLayer" data-testid="undefined" data-ownerid="u_0_10" style="width: 473px; left: 288px; top: 290px;">
<div class="uiContextualLayer _5v-0 _53il uiContextualLayerBelowLeft">
<div class="_54nq _57di _558b _2n_z" id="u_0_y">
<div class="_54ng">
<ul class="_54nf" role="menu">
<li class="_54ni _5ipo __MenuItem" role="presentation">
<a class="_54nc _54nu" href="#" role="menuitemcheckbox">
<span>
<i class="mrs img sp_Kw8-3yVLtZo sx_864bd8"></i>
<span class="_54nh">Item1</span>
</span>
</a>
</li>
<li class="_54ni _5ipo _54nd __MenuItem" role="presentation">
<a class="_54nc _54nu" href="#" data-testid="notif_setting_higlights" role="menuitemcheckbox" aria-checked="true">
<span>
<i class="mrs img sp_Kw8-3yVLtZo sx_864bd8">
</i>
<span class="_54nh">Item2</span>
</span>
</a>
</li>
<li class="_54ni _5ipo __MenuItem" role="presentation">
<a class="_54nc _54nu" href="#" role="menuitemcheckbox">
<span>
<i class="mrs img sp_Kw8-3yVLtZo sx_864bd8"></i>
<span class="_54nh">Item3</span>
</span>
</a>
</li>
<li class="_54ni _5ipo __MenuItem" role="presentation">
<a class="_54nc _54nu" href="#" role="menuitemcheckbox">
<span>
<i class="mrs img sp_ey5BbZl6hUH sx_780712">
</i>
<span class="_54nh">Item4</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
and i can see that Item1 is deselected, and Item2 is selected with:
aria-checked="true"
and i want to deselect Item2 and select Item1. For this purpose take objectID from Item1 that says it's selected
_54nc _54nu
and call
document.getElementById("_54nc _54nu").setAttribute("aria-checked", true)', 'about: blank', 0)
but nothin happens. What did i missed?
P.S. I see that all object-ID's of class are same, but i also tried other id's. Maybe I misunderstood the issue of id for the class, and maybe the way it is different. Please give me directions. :)

document.getElementById() is incorrect since none of your element has any id.
You want to use document.getElementsByClassName()

How to keep parent li opened when i clicked the child li element

<li>
<a href="#">
<i class="entypo-tools"></i>
<span class="title">PHP-SDK</span>
<span class="badge badge-secondary">3</span>
</a>
<ul>
<li class="dropdown-submenu">
<a href="/mypage_v2/sdk/installation">
<i class="entypo-inbox"></i>
<span class="title">Installation</span>
</a>
</li>
<li class="dropdown-submenu">
<a href="/mypage_v2/sdk/getStarted">
<i class="entypo-docs"></i>
<span class="title">Getting Started</span>
</a>
</li>
<li>
<a href="#">
<i class="entypo-flash"></i>
<span class="title">API-Endpoints</span>
<span class="badge badge-info">3</span>
</a>
<ul>
<li>
<a href="#">
<i class="entypo-newspaper"></i>
<span class="title">sample1</span>
<span class="badge badge-success">4</span>
</a>
<ul>
<li>
<a href="/mypage_v2/sdk/newsletter">
<i class="entypo-newspaper"></i>
<span class="title">sample1</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/newsletterEmail">
<i class="entypo-newspaper"></i>
<span class="title">sample2</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/newsletteranalytics">
<i class="entypo-newspaper"></i>
<span class="title">sample2</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/sample2">
<i class="entypo-newspaper"></i>
<span class="title">NewslettersProcess</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>

If you use php rendering and on menu item click page refreshes, you can add class for example "active" to parent li(s), and in styles add li.active {display:block} or something like that style to show hidden elements

Finally i am ok with the condition of laravel routes
<li #if(Request::path() == "mypage_v2/applications/lists" || Request::path() == "mypage_v2/applications/register") class="active opened")#endif>

Turn a list structure into an accordion without altering the HTML

I've found various jQuery scripts that partially work (they make parts of the text disappear but breaks on reappear, the parent and child disappear on click, etc.) but since I am very new to jQuery I can't really make my own fix or know how to make other scripts fit my problem.
How can I turn the following list structure into an accordion, where clicking on the header drops down the content?
Unfortunately, the web app this comes from does not allow altering the HTML, so only script and CSS solutions will work.
<ul>
<li class="static selected">
<a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" tabindex="0" href="#">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Header1</span>
</span>
</a>
<ul class="static">
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="#">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Content1</span>
</span>
</a>
</li>
</ul>
</li>
</ul>

This is how I would do it using jQuery.
$(function(){
var hiddens = $('.menu-item + ul'); // Select all hiddens
hiddens.each(function() { // Loop through all hiddens
var hidden = $(this); // Save $(this) for later
$(this).parent().click(function(e) { // Catch the parent's click event
hiddens.each(function(){ // Loop through all hiddens
if(!$(this).is(hidden)) // Check if the current element
// is the one we want to toggle,
$(this).removeClass('show');// Hide it otherwise
});
hidden.toggleClass('show'); // Toggle the selected hidden
e.stopPropagation(); // Stop this event from bubbling
});
$(this).click(function(e) {
e.stopPropagation(); // Stop this event from bubbling
});
});
$(document).click(function(e) { // Hide all shown hiddens.
hiddens.filter('.show').removeClass('show');
});
});
.menu-item + ul {
display: none; /* Hide all hiddens */
}
.menu-item + ul.show {
display: block; /* Show only the current hidden */
}
<!-- This HTML is used for the purposes of this demo, no changes made --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul><li class="static selected"><a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" tabindex="0" href="#"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Header1</span></span></a><ul class="static"><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="#"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Content1</span></span></a></li></ul></li><li class="static selected"><a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" tabindex="0" href="#"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Header1</span></span></a><ul class="static"><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="#"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Content1</span></span></a></li></ul></li><li class="static selected"><a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" tabindex="0" href="#"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Header1</span></span></a><ul class="static"><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="#"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Content1</span></span></a></li></ul></li></ul>

jquery - Remove class from parent in list

I need a Javascript IF statement that detects if:
$('.ms-quickLaunch .menu ul.static li a .menu-item-text') == "Manage"
And if it does equal "Manage" then set the list to .show().
<ul class="root static">
<li class="static linksBelow">
<a href="#" class="static menu-item">
<span class="additional-background">
<span class="menu-item-text">Manage</span>
</span>
</a>
<ul class="static" style="display: none;">
<li>
<a href="javascript:open();" class="static menu-item">
<span class="additional-background">
<span class="menu-item-text">Manage List</span>
</span>
</a>
<a href="#" class="static menu-item">
<span class="additional-background">
<span class="menu-item-text">Manage Documents</span>
</span>
</a>
</li>
</ul>
</li>
</ul>
*

if ($('.ms-quickLaunch .menu ul.static .menu-item-text').html() == "Manage") {
$('.ms-quickLaunch .menu ul.static').show();
}
(I have removed a couple of unnecessary elements from your selector to make it more efficient)

ok maybe you can try this.
but if it's possible, it's better to add id to all those lines to avoid possible clash.
<ul class="root static">
<li class="static linksBelow">
<a href="#" class="static menu-item">
<span class="additional-background">
<span class="menu-item-text">Manage</span>
</span>
</a>
<ul class="static" style="display: none;">
<li>
<a href="javascript:open();" class="static menu-item">
<span class="additional-background">
<span class="menu-item-text">Manage List</span>
</span>
</a>
<a href="#" class="static menu-item">
<span class="additional-background">
<span class="menu-item-text">Manage Documents</span>
</span>
</a>
</li>
</ul>
</li>
</ul>
if($("li.linksBelow span.menu-item-text").html().toLowerCase()=="manage"){
$("ul.static ul.static").show();
}

var anchor = $('.ms-quickLaunch .menu ul.static li a');
if ($('.menu-item-text', anchor).html() === "Manage")
{
anchor.next("ul").show();
}
jsFiddle Demo