Develop Reference

How can I maintain collapse-state of side bar after page refresh?

In my Sidebar I have included a collapse button to show/hide tabs. Now I want to maintain the collapse-state when refreshing the page: If the form was un-collapsed before refreshing the page, it must stay like this after the refresh. I am new to js. Below is my HTML:
<div class="sidebar">
<li class="mb-1">
<button class="btn btn-toggle align-items-center fa fa-database" data-bs-toggle="collapse"
data-bs-target="#button-1-collapse" aria-expanded="true">
Button-1
</button>
<div class="collapse" id="button-1-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 ">
<li> example-1</li>
<li> example-2</li>
<li> example-3</li>
</ul>
</div>
</li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center fa fa-file-code-o" data-bs-toggle="collapse"
data-bs-target="#button-2-collapse" aria-expanded="true">
Button-2
</button>
<div class="collapse" id="button-2-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 ">
<li> example-1</li>
<li> example-2</li>
<li> example-3</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
Thanks for your help!

After some research, i have what i required. Attaching code part herewith which maybe beneficial to others.
$(function () {
const buttonCollapse1 = $("#button-1-collapse");
const buttonCollapse2 = $("#button-2-collapse");
buttonCollapse1.on("shown.bs.collapse", function () {
sessionStorage.setItem("buttonCollapse1", "show");
});
buttonCollapse2.on("shown.bs.collapse", function () {
sessionStorage.setItem("buttonCollapse2", "show");
});
buttonCollapse1.on("hidden.bs.collapse", function () {
sessionStorage.setItem("buttonCollapse1", "hide");
});
buttonCollapse2.on("hidden.bs.collapse", function () {
sessionStorage.setItem("buttonCollapse2", "hide");
});
const button1 = sessionStorage.getItem("buttonCollapse1");
if (button1 === "show") {
buttonCollapse1.collapse("show");
} else {
buttonCollapse1.collapse("hide");
}
const button2 = sessionStorage.getItem("buttonCollapse2");
if (button2 === "show") {
buttonCollapse2.collapse("show");
} else {
buttonCollapse2.collapse("hide");
}
});

How to select 2nd bootstrap tab on load of page?

EDIT: So i ditched the whole thing and resorted to javascript with these new codes #Udara Kasun's code worked and it was close but not what I was trying to achieve. tried these codes for a while and i think i almost got it.
<script>
function myFunction1()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child(1) a').tab('show')
});
}
function myFunction2()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child(2) a').tab('show')
});
}
function myFunction3()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child(3) a').tab('show')
});
}
</script>
<li role="presentation" class="active" id="tabMenu1" onclick="myFunction1()">
<a href="#tabZone" data-toggle="tab" role="tab" aria-controls="tab1">
Zones
</a>
</li>
<li role="presentation" id="tabMenu2" onclick="myFunction2()">
<a href="#tabChapels" data-toggle="tab" role="tab" aria-controls="tab2">
Chapels
</a>
</li>
<li role="presentation" id="tabMenu3" onclick="myFunction3()">
<a href="#tabUnits" data-toggle="tab" role="tab" aria-controls="tab3">
Units
</a>
</li>

Did you try to do like this?
$(document).ready(function(){
$('.nav-tabs a:last').tab('show') ;
var lastselectedtab = localStorage.getItem("ActiveTab");
$('.nav-tabs a[href="'+(lastselectedtab==''?"#tabChapels":lastselectedtab)+'"]').tab('show');
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
localStorage.setItem("ActiveTab", target);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">
Zones
</li>
<li role="presentation">
Chapels
</li>
</ul>
<div id="tabContent1" class="tab-content" style="font-family:Arial Unicode MS;">
<div role="tabpanel" class="tab-pane fade" id="tabZone">
Content 1
</div>
<div role="tabpanel" class="tab-pane fade in active" id="tabChapels">
Content 2
</div>
</div>
</div>
Code pen Link
https://codepen.io/udarakasun/pen/YdyRRy

Nobody seemed to care anymore haha anyways for those of you who are wanting to achieve the same thing that I wanted to, I've created a stupid and ingenious way but it works.
<script language="javascript">
<?php
if(isset($_GET['tabName']))
{
if($_GET['tabName']=="TAB1")
{
echo "var tabNo=1;";
$_SESSION['tabNo']=1;
}
elseif($_GET['tabName']=="TAB2")
{
echo "var tabNo=2;";
$_SESSION['tabNo']=2;
}
}
?>
function loadscript()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child('+<?php echo $_SESSION['tabNo'];?>+') a').tab('show')
});
}
function myFunction1()
{
var tabName="TAB1";
window.location.href = "panel_gkkmain.php?tabName=" + tabName;
}
function myFunction2()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child(2) a').tab('show')
});
var tabName="TAB2";
window.location.href = "panel_gkkmain.php?tabName=" + tabName;
}
function myFunction3()
{
var tabName="TAB3";
window.location.href = "panel_gkkmain.php?tabName=" + tabName;
}
and for the body, you have to declare onload="loadscript()"
After that you'll need to add bootstrap components to your page. This can be done easier through ADOBE DREAMWEAVER.
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active" onClick="myFunction1()">
<a href="#home1" data-toggle="tab" role="tab" aria-controls="tab1">
Zones
</a>
</li>
<li role="presentation" onClick="myFunction2()">
<a href="#paneTwo1" data-toggle="tab" role="tab" aria-controls="tab2">
Chapels
</a>
</li>

Get the ID of clicked element and use it as $(this)

I need to be able to click an element, get the ID of that element and use it on another function. How can I do it as It is not working using $(this). This is what I have so far:
$("#pills-ficha").on("click", closePillsOnClick);
function closePillsOnClick() {
var clickedId = $(this).attr("id");
var clickedIdChild = $(this).html($(this).html().split("By:").join(""));
if ($(clickedId).hasClass("active")) {
$(clickedId).removeClass("active show");
e.stopPropagation();
$(clickedIdChild).removeClass("active show").css("display", "none");
} else {
$(clickedIdChild).css("display", "block");
$(clickedIdChild).siblings().css("display", "none");
}
}
/* edit */
I'll add the markup:
<div class="d-flex flex-nowrap align-items-center">
<ul id="examples" class="nav nav-pills justify-content-center justify-content-lg-start" role="tablist">
<span class="text-blue font-weight-medium">EJEMPLOS:</span>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="pills-ficha-tab" data-toggle="pill" href="#pills-ficha" role="tab" aria-controls="pills-ficha" aria-selected="false">Ficha</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="pills-candidato-tab" data-toggle="pill" href="#pills-candidato" role="tab" aria-controls="pills-candidato" aria-selected="false">Mail candidato</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="pills-empresa-tab" data-toggle="pill" href="#pills-empresa" role="tab" aria-controls="pills-empresa" aria-selected="false">Mail empresa</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 offset-lg-2 text-center tab-content" id="pills-tabContent">
<div class="tab-pane fade" id="pills-ficha" role="tabpanel" aria-labelledby="pills-ficha-tab">
<img src="img/gold/gold-ejemplo-ficha.jpg" alt="Ejemplo de ficha">
</div>
<div class="tab-pane fade" id="pills-candidato" role="tabpanel" aria-labelledby="pills-candidato-tab">
<img src="img/gold/gold-ejemplo-candidato.jpg" alt="Ejemplo de mail al candidato">
</div>
<div class="tab-pane fade" id="pills-empresa" role="tabpanel" aria-labelledby="pills-empresa-tab">
<img src="img/gold/gold-ejemplo-empresa.jpg" alt="Ejemplo de mail a la empresa">
</div>
</div>
</div>

The main issue with your logic is because attr('id') is returning you back pills-ficha, which in itself is not a valid selector. You would need to append # to it for it to work.
However this is a flawed approach. You already have the reference to the element itself through the this keyword. Creating a reference to that element to get its id to then get another reference to the same element by that id is entirely pointless.
As such, you can simplify the logic like this:
$("#pills-ficha").on("click", closePillsOnClick);
function closePillsOnClick() {
var $clicked = $(this);
var clickedIdChild = $clicked.html($clicked.html().split("By:").join(""));
if ($clicked.hasClass("active")) {
e.stopPropagation();
$clicked.removeClass("active show");
$(clickedIdChild).removeClass("active show").hide();
} else {
$(clickedIdChild).show().siblings().hide()
}
}
It's likely you can do the same with the clickedIdChild reference, but your HTML doesn't show enough information for me to give you an example of how to fix that.

The problem with my original question was this part:
var clickedIdChild = $(this).html($(this).html().split("By:").join(""));
It had to be:
var clickedIdChild = clickedId.split(":By").join("");
Also adding:
$("#"+clickedIdChild) as a selector.
Then this works as expected:
function closePillsOnClick(e){
var clickedId = $(this).attr("id");
var clickedIdChild = clickedId.split("-tab").join("");
if( $(this).hasClass("active") ){
$(this).removeClass("active show");
e.stopPropagation();
$("#"+clickedIdChild).removeClass("active show").css("display", "none");
} else {
$("#"+clickedIdChild).css("display", "block");
$("#"+clickedIdChild).siblings().css("display", "none");
}
};

OK let's clarify this. var clickedId = $(this).attr("id"); will return ID in the form fakeId. Next you have a jQuery with with the ID ($(clickedId)) which will be $('fakeId') in my example. ID selector needs to start with # so you have to add it. So valid code will be $('#' + clickedId). More here:
http://api.jquery.com/id-selector/
https://api.jquery.com/attr
Cheers.

dynamically load file to html tab content

I am trying to load the tab contents dynamically from different html page. When I click EROs tab it should display the contents from /SVB/Tax_Eros.html file without reloading the page. Likewise when Import tab is clicked it should display the contents from /SVB/Tax_Imports
<ul class="nav nav-tabs">
<li class="active" >
EROs
</li>
<li>
Imports
</li>
<li>
Accounting
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="eros">
<script>
$('#eros').click(function(){
$('#Taxeros').load($(this).attr('href'));
});
</script>
</div>
<div class="tab-pane" id="imports">
<script>
$('#imports').click(function(){
$('#Taximports').load($(this).attr('href'));
});
</script>
</div>
<div class="tab-pane" id="accounting">
<script>
$('#accounting').click(function(){
$('#Taxaccounting').load($(this).attr('href'));
});
</script>
</div>
</div>

Since you are using Bootstrap Tabs (3.3.7) you will need to modify your markup as Bootstrap expects certain conventions for it to do its magic without configuring a bunch of JS.
Instead of placing the page you need to load in the href attribute we place it in a custom data-src attribute. Bootstrap expects the value of the href attribute to be the ID of the tab pane associated with the tab. We also added data-toggle="tab" as that is required for Bootstrap Tabs to function.
It looked like you were trying to load content on tab click but that isn't useful for the default tab and it's tab pane as there won't be any content in it initially. So we've passed a function to jQuery that will get executed when the DOM is ready. This function will parse the tabs and load content into the tab panes based on the attribute values.
$(function() {
$('.nav-tabs a').each(function(index, el) {
var $this = $(this);
var pane = $this.attr('href');
var src = $this.data('src');
$(pane).load(src);
});
});
<ul class="nav nav-tabs">
<li class="active">
<a data-src="/SVB/Tax_Eros" href="#eros" data-toggle="tab">EROs</a>
</li>
<li>
<a data-src="/SVB/Tax_Imports" href="#imports" data-toggle="tab">Imports</a>
</li>
<li>
<a data-src="/SVB/Tax_Accounting" href="#accounting" data-toggle="tab">Accounting</a>
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="eros">1</div>
<div class="tab-pane" id="imports">2</div>
<div class="tab-pane" id="accounting">3</div>
</div>
As far as I know, Stack Snippets cannot mock Ajax requests so here's a JSFiddle and a Plunker that do.

$(function() {
$('.nav-tabs a').each(function(index, el) {
var $this = $(this);
var pane = $this.attr('href');
var src = $this.data('src');
$(pane).load(src);
});
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<ul class="nav nav-tabs">
<li class="active">
<a data-src="/SVB/Tax_Eros" href="#eros" data-toggle="tab">EROs</a>
</li>
<li>
<a data-src="/SVB/Tax_Imports" href="#imports" data-toggle="tab">Imports</a>
</li>
<li>
<a data-src="/SVB/Tax_Accounting" href="#accounting" data-toggle="tab">Accounting</a>
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="eros">1</div>
<div class="tab-pane" id="imports">2</div>
<div class="tab-pane" id="accounting">3</div>
</div>

<html>
<head>
<script type='text/javascript'>
function clicks () {
var myButtons = document.querySelectorAll('.eros') || null;
if (myButtons != null){
for (var i = 0; i < myButtons.length; i++){
myButtons[i].addEventListener('click', function () {
var url = this.getAttribute('data-href'); // location to load
var obj = this.getAttribute('data-id');//id to append content
var type = 'GET'; /*-> post or get-> if is 'post' page must be in Php or other server language*/
data = '';
var objElm = document.querySelector('#'+obj) || null;
if (objElm === null){console.log('no element to write content'); return;}
xmlRequest (url, type, data, obj)
}, !1);
}
}
}
function xmlRequest (url, type, data, obj){
var xhr = new XMLHttpRequest || null;
if (chr === null){console.log('Obsolete browser');return;}
xhr.addEventListener('load', function () {
if (this.status == 200 && this.readyState == 4){
obj.innerHTML = this.responseText;
}
else {console.log('Error')}
}, !1);
xhr.open(type, url);
xhr.setRequestHeader('Content-type', 'Application/x-www-form-urlencoded');
xhr.send(data)
}
</script>
<script type='text/javascript'>
window.addEventListener('load', function () {
clicks ();
}, !1)
</script>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active" >
<a data-href="/SVB/Tax_Eros" data-toggle="tab" data-id="eros" class="eros">EROs</a>
</li>
<li>
<a data-href="/SVB/Tax_Imports" data-toggle="tab" data-id="imports" class="eros">Imports</a>
</li>
<li>
<a data-href="/SVB/Tax_Accounting" data-toggle="tab" data-id="accounting" class="eros">Accounting</a>
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="eros"> </div>
<div class="tab-pane" id="imports"></div>
<div class="tab-pane" id="accounting"></div>
</div>
</body>

How can I substitute ngmodel by ngclick

Now my code uses ng-model:
<input type="checkbox" ng-model="padesVisual.selected">
However, I need to change to ng-click:
<li>
<a href="#PAdES" aria-controls="PAdES" role="tab" data-toggle="tab"
ng-click="VerificaPades(verifica)">PAdES</a>
</li>
I tried to use this function:
$scope.VerificaPades = function(verifica) {
if ($scope.padesVisual.selected) {
return true;
} else {
return false;
}
}

The snippet below demonstrates one way to implement a boolean toggle using ng-click. The main point of interest is the VerificadaPades function, which actually toggles the boolean model.
var eAssinatura = angular.module("pades", []);
eAssinatura.controller('AdicionarEditarFormatoAssinaturaDialogController', ['$scope',
function ($scope) {
$scope.padesVisual = {
positions: [],
fields: [],
selected: false,
sealStamp: { isSelected: false, image: '' }
}
$scope.VerificaPades = function () {
$scope.padesVisual.selected = !$scope.padesVisual.selected;
}
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="pades" ng-controller="AdicionarEditarFormatoAssinaturaDialogController">
<ul class="nav nav-tabs" role="tablist">
<li class="active">
CAdES
</li>
<li>
<a href="#PAdES" aria-controls="PAdES" role="tab" data-toggle="tab" ng-click="VerificaPades()">
PAdES</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="CAdES">CAdES</div>
<div role="tabpanel" class="tab-pane fade" id="PAdES">
<div class="row" ng-show="padesVisual.selected">
Selected
</div>
</div>
</div>
</div>