We Keep Coding

Editing to Javascript function for animating html

So firstly I will admit I am a kook and have no understanding of javascript, I've jumped onto w3schools and tried to learn how to adjust the following however I have failed miserably. I understand that the solution to this question will not benifit the masses but it will sure help me, grateful for any advise.
The following script will animate the first panel-heading in an accordion list to the top of the webpage. I am however nesting many accordions inside one another (can see example here) so as you click deeper into the hierarchy the html will animate and the open accordion will be off screen at the bottom.
I need to specify the panel-heading of the opening panel-title and have that animate to the top instead of the previous or parent like what is happening now.
So I believe I need to change prev('.panel-heading'); into current panel-heading somehow??
The script
$(".panel-group").on("shown.bs.collapse", function () {
var myEl = $(this).find('.collapse').prev('.panel-heading');
$('html, body').animate({
scrollTop: $(myEl).offset().top
}, 500);
});
<!-- ACCORDION-->
<div id="accordion" class="panel-group">
<div class="panel panel-default">
<div id="heading" class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false">Panel Title 1</a></h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Another accordion here and inside those panels are more accordions</div>
</div>
</div>
<div class="panel panel-default">
<div id="heading" class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" class="collapsed">Panel Title 2</a></h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Another accordion here</div>
</div>
</div>
<div class="panel panel-default">
<div id="heading" class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" class="collapsed">Panel Title 3</a></h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Another accordion here</div>
</div>
</div>
</div>
<!-- END ACCORDION-->

Bootstrap columns enlarge the more I type in a search bar

When typing in to an input search bar, my Bootstrap div .col-xs-4 enlarges, breaking out of it's container. What's odd is, Developer Tools doesn't seem to show any changes in the code that would affect this.
To replicate this problem, try typing the full name of one of the images in this JSFiddle gallery i.e., "Satcom 2016", and watch the div burst out of it's container. Clearing the input then shows that every div has expanded, not just the visible ones.
JSFiddle
https://jsfiddle.net/vadrfgvv/
jQuery
function rowBreak(input) {
$('.col-flex').hide();
if (input) {
$('.row-flex').replaceWith(function() {
return $(this).html();
});
$('.col-flex').wrapAll('<div class="row">');
}
$('.col-visible').each(function(i, e) {
if (((i + 1) % 3 == 0) && ($(this).siblings().length != 2)) {
var x = $('.col-visible:gt(' + i + ')');
$('<div class="row">').append(x).insertAfter(this.closest('div.row'));
}
});
$('.col-visible').show();
}
rowBreak(0);
$('#search').on('keyup', function() {
$('.col-flex').removeClass('col-visible').hide();
var s = $(this).val().toLowerCase();
$('.col-flex').filter(function() {
return $(this).find('h4').text().toLowerCase().indexOf(s) > -1;
}).show().addClass('col-visible');
rowBreak(s);
});
$('#results').on('click', '.panel-search', function() {
$(this).toggleClass('panel-default').toggleClass('panel-success');
$(this).find('.panel-body').toggleClass('bg-green');
var image = $(this).find('img');
var imageID = image.attr('id');
// alert(image.width());
if ($(this).hasClass('panel-success')) {
image.clone().appendTo('.panel-include').removeClass('img-thumbnail').css('margin-bottom', '20px').attr('id', 'x' + imageID).wrap('<p></p>');
} else {
$('.panel-include').find(('#x' + imageID)).closest('p').remove();
}
if ($('.panel-include > p').length == 0) {
$('.panel-include').find('em').show();
} else {
$('.panel-include').find('em').hide();
}
});
$('.btn-save').on('click', function(e) {
e.preventDefault();
var logos = '';
$('.panel-include').find('p').each(function() {
imageID = $(this).find('img').attr('id');
logos += imageID;
});
if (logos) {
logos = logos.substr(1);
}
$("input[name=ids]").val(logos);
$(this).closest('form').submit();
});
HTML
<div class="container-fluid">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-search"></i></span>
<input class="form-control" id="search" type="text" placeholder="Search...">
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
Your Chosen Content
</h4>
</div>
<div class="panel-body panel-include">
<em class="text-muted">Click on some images to add them here.</em>
</div>
</div>
<form action="#" method="get">
<input type="hidden" name="ids" value="">
<p class="text-right">
<button class="btn btn-primary btn-save" type="submit">
<i class="fa fa-save"></i> Save
</button>
</p>
</form>
</div>
<div class="col-xs-9">
<div id="results">
<div class="row row-flex">
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
AEClim
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=AEClim" id="1">
</div>
</div>
</div>
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
AEMET
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=AEMET" id="2">
</div>
</div>
</div>
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
AME
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=AME" id="3">
</div>
</div>
</div>
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
APMG
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=APMG" id="4">
</div>
</div>
</div>
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
ATC Network
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=ATC+Network" id="5">
</div>
</div>
</div>
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
Meteomet
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=Meteomet" id="6">
</div>
</div>
</div>
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
MMC 2016
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=MMC+2016" id="7">
</div>
</div>
</div>
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
Satcom 2016
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=Satcom+2016" id="8">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I initially thought it was the .img-responsive class that was causing problems (maybe the image was enlarging when the div was hidden?), but it seems like the image doesn't actually enlarge with the div, so that rules that out.
I'm not sure where else to start debugging.
Note: I have kept the entirety of the Javascript that affects these page elements in my question/Fiddle, in case it is something there that is causing the problem.

.row {
margin-right: -15px;
margin-left: -15px;
}
This CSS is the cause of your problem. i didn't see exactly how, but your js code nesting a row for every character typed. and with this css in bootstrap.css each nested row grows larger and larger. the images expand too.
what you can do is, overwrite this css in your html file with <style> tag. something like:
<style>
.row{
margin-right:0px;
margin-left:0px;
}
</style>
but you should know this is only a quick fix. a hack. if i was in your place, i'd look for the reason why your code is nesting a row for every character.

Accordion Codes not working

My codes is not running properly as I can't navigate through the categories or collapse or uncollapse the accordion. The page is only displays as collapsed view and I was unable to uncollapse the accordion it.
I am current using bootstrap 3 framework with asp.net.
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript" >
$(document).ready(function () {
$('.collapse').on('show.bs.collapse', function () {
var id = $(this).attr('id');
$('a[href="#' + id + '"]').closest('.panel-heading').addClass('active-faq');
$('a[href="#' + id + '"] .panel-title span').html('<i class="glyphicon glyphicon-minus"></i>');
});
$('.collapse').on('hide.bs.collapse', function () {
var id = $(this).attr('id');
$('a[href="#' + id + '"]').closest('.panel-heading').removeClass('active-faq');
$('a[href="#' + id + '"] .panel-title span').html('<i class="glyphicon glyphicon-plus"></i>');
});
});
</script>
<div class="container">
<div class="row">
<!--NAV Tabs catagory-->
<ul class="nav nav-tabs faq-cat-tabs" role="tablist">
<li class="active"><i class="fa fa-life-saver pr-10"></i> General</li>
<li><i class="fa fa-star pr-10"></i> Popular Topics</li>
</ul>
<!-- Tab Panels-->
<div class="tab-content faq-cat-content">
<div class="tab-pane active in fade" id="faq-cat-1">
<div class="panel-group" id="accordion-cat-1">
<div class="panel panel-default panel-faq">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion-cat-1" href="#faq-cat-1-sub-1">
<h4 class="panel-title">
1. Why should I hire an interior designer?
<span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
</h4>
</a>
</div>
<div id="faq-cat-1-sub-1" class="panel-collapse panel">
<div class="panel-body">
A professional interior designer will be able to offer advice and sugguestions based on his expertise to help you create your ideal conceptual design, hassle-free
</div>
</div>
</div>
<div class="panel panel-default panel-faq">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion-cat-1" href="#faq-cat-1-sub-2">
<h4 class="panel-title">
2. What are the procedures involved in the hiring of your interior designers?
<span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
</h4>
</a>
</div>
<div id="faq-cat-1-sub-2" class="panel-collapse panel">
<div class="panel-body">
Simply create an account from our website and you are all set to consult the interior designer of your choice to embark on an unforgettable journey with Impression Design Firm.
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="faq-cat-2">
<div class="panel-group" id="accordion-cat-2">
<div class="panel panel-default panel-faq">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion-cat-2" href="#faq-cat-2-sub-1">
<h4 class="panel-title">
3. How can I make my payment?
<span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
</h4>
</a>
</div>
<div id="faq-cat-2-sub-1" class="panel-collapse collapse">
<div class="panel-body">
Impression Design Firm would only allow cheque payments for the benefit and convenience of both parties for project payments, and credit cards for furniture purchases.
</div>
</div>
</div>
<div class="panel panel-default panel-faq">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion-cat-2" href="#faq-cat-2-sub-2">
<h4 class="panel-title">
4. Do you provide free delivery?
<span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
</h4>
</a>
</div>
<div id="faq-cat-2-sub-2" class="panel panel-collapse">
<div class="panel-body">
Impression Design Firm provides free delivery for any furniture and supplies purchased, which will be sent directly to your doorstep!
</div>
</div>
</div>
<div class="panel panel-default panel-faq">
</div>
</div>
</div>
</div>
</div>
</div>

Accordion control of Bootstrap not working corretly

Live version here:
http://www.bootply.com/7aYZsAKgSy
I have two of these on my page that want them to collapse or expand independent of each other , I do not want one of them to have affect on status of other ones.
So I have something like this:
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#PANEL1">
<span class="glyphicon glyphicon-chevron-down"></span>
PANEL 1
</a>
</h4>
</div>
<div id="PANEL1" class="panel-collapse collapse in">
<div>
THERE IS A FORM HERE THAT IS THE STUFF IN THIS PANEL
</div>
</div>
</div>
</div>
</div>
and then one more under it, very similar copy paste, just the ID of inner DIV is different:
I have two of these on my page that want them to collapse or expand independent of each other , I do not want one of them to have affect on status of other ones.
So I have something like this:
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#PANEL2">
<span class="glyphicon glyphicon-chevron-down"></span>
PANEL 1
</a>
</h4>
</div>
<div id="PANEL2" class="panel-collapse collapse in">
<div>
THERE IS another FORM HERE THAT IS THE STUFF IN THIS PANEL
</div>
</div>
</div>
</div>
</div>
and then my JavaScript that is this:
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
}).on('hidden.bs.collapse', function () {
$(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});
So sometimes it works, sometimes it does not. When both of them are open and I first close the second one, it also closes the first one.

Is that what you want?
http://www.bootply.com/MiQbLj7uIA
I just changed the id of the second accordion and its data-parent value.

Bootstrap Accordion does not remain on the same tab, after copying the URL to other location

Below is the javascript & HTML code for Bootstrap accordion, that I am using in my Project.
Issue is: If user is on the 2nd Tab i.e., RELATED SOPs and then opens any of the nested tab inside it, and then copy the URL from the address bar and paste it to any another browser or another tab of same browser, then always nested tab of 1st Tab i.e., QESH MANUAL is opened in place of 2nd Tab & its nested tab (last opened by user).
EDIT
<script type="text/javascript">
$(document).ready(function () {
$("ul#tab li:first").addClass("aktif");
$("div.tab_icerik").hide();
$("div.tab_icerik:first").show();
$("ul#tab li").click(function (e) {
var index = $(this).index();
$("ul#tab li").removeClass("aktif");
$(this).addClass("aktif");
$("div.tab_icerik").hide();
$("div.tab_icerik:eq(" + index + ")").show();
return false
});
$(".tabv2").click(function () {
var thisId = $(this).attr('id');
var thatId = $(this).siblings().attr('id')
$('[class^="tabv2-"]').hide();
$('.' + thisId).show();
$('.tabv2').removeClass('tabv2-active');
$(this).addClass('tabv2-active');
});
$(".tabv2plain").click(function () {
var thisId = $(this).attr('id');
var thatId = $(this).siblings().attr('id')
$('[class^="tabv2plain-"]').hide();
$('.' + thisId).show();
$('.tabv2plain').removeClass('tabv2plain-active');
$(this).addClass('tabv2plain-active');
});
$(".tabv3plain").click(function () {
var thisId = $(this).attr('id');
var thatId = $(this).siblings().attr('id')
$('[class^="tabv3plain-"]').hide();
$('.' + thisId).show();
$('.tabv3plain').removeClass('tabv3plain-active');
$(this).addClass('tabv3plain-active');
});
});
</script>
<body>
<script>
function myFunction() {
window.location.hash = "#One";
//var a = "QESH MANUAL" + location.hash;
//document.getElementById("One").innerHTML = a;
}
function myFunction2() {
window.location.hash = "#Two";
}
function myFunction3() {
window.location.hash = "#collapseOne";
}
function myFunction4() {
window.location.hash = "#collapseOneOne";
}
function myFunction5() {
window.location.hash = "#collapseOneOne1";
}
function myFunction6() {
window.location.hash = "#collapseOneTwo";
}
function myFunction7() {
window.location.hash = "#collapseOneTwo1";
}
function myFunction8() {
window.location.hash = "#collapseOneTwo2";
}
function myFunction9() {
window.location.hash = "#collapseOneTwo3";
}
function myFunction10() {
window.location.hash = "#collapseOneTwo4";
}
function myFunction11() {
window.location.hash = "#collapseOneTwo5";
}
function myFunction12() {
window.location.hash = "#collapseOneTwo6";
}
function myFunction13() {
window.location.hash = "#collapseOneThree";
}
function myFunction14() {
window.location.hash = "#collapseOneThree1";
}
function myFunction15() {
window.location.hash = "#collapseOneFour";
}
function myFunction16() {
window.location.hash = "#collapseOneFour1";
}
function myFunction17() {
window.location.hash = "#collapseTwo";
}
function myFunction18() {
window.location.hash = "#collapseTwo1";
}
function myFunction19() {
window.location.hash = "#collapseThree";
}
function myFunction20() {
window.location.hash = "#collapseThree1";
}
function myFunction21() {
window.location.hash = "#collapseFour";
}
function myFunction22() {
window.location.hash = "#collapseFour1";
}
//2nd Tab Menus
function myFunction23() {
window.location.hash = "#collapseFive";
}
function myFunction24() {
window.location.hash = "#collapseFive1";
}
</script>
<div>
<div class="row" style="padding-top:5px">
<div class="col-md-12">
<ul id="tab">
<li class="">
<a onclick="myFunction()" href="#One">QESH MANUAL</a>
</li>
<li style="margin-left:3px;" class="aktif">
<a onclick="myFunction2()" href="#Two">RELATED SOPs</a>
</li>
</ul>
</div>
</div>
<div class="row" style="padding-top:5px">
<div class="tab_icerik" style="display: block;">
<div class="col-md-4">
<span style="display:block;">
<div id="accordionA1" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
<a data-toggle="collapse" data-parent="#accordionA1" onclick="myFunction3()" href="#collapseOne"> CONSTRUCTION</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<!-- SECOND LEVEL ACCORDION START -->
<div id="accordionA2" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionA2" onclick="myFunction4()" href="#collapseOneOne">QESH MANUAL</a>
</h4>
</div>
<div id="collapseOneOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="group row clear" id="tabsv2plain">
<div class="tabv2plain tabv2plain-active" id="tabv2plain-1">
<a onclick="myFunction5()" href="#collapseOneOne1">QESH Manual</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionA2" onclick="myFunction6()" href="#collapseOneTwo">PROCEDURES MANUALS</a>
</h4>
</div>
<div id="collapseOneTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div1">
<div class="tabv2plain" id="tabv2plain-2">
<a onclick="myFunction7()" href="#collapseOneTwo1">Tender & Contract Procedure Manual</a>
</div>
<div class="tabv2plain" id="tabv2plain-3">
<a onclick="myFunction8()" href="#collapseOneTwo2">Procurement Procedure Manual</a>
</div>
<div class="tabv2plain" id="tabv2plain-4">
<a onclick="myFunction9()" href="#collapseOneTwo3">Pre-Construction & Planning Procedure Manual</a>
</div>
<div class="tabv2plain" id="tabv2plain-5">
<a onclick="myFunction10()" href="#collapseOneTwo4">Project Implementation & Management Procedure Manual</a>
</div>
<div class="tabv2plain" id="tabv2plain-6">
<a onclick="myFunction11()" href="#collapseOneTwo5">Post-Construction Procedure Manual</a>
</div>
<div class="tabv2plain" id="tabv2plain-7">
<a onclick="myFunction12()" href="#collapseOneTwo6">Management System Administration Procedure Manual</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionA2" onclick="myFunction13()" href="#collapseOneThree">QESH POLICY</a>
</h4>
</div>
<div id="collapseOneThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div2">
<div class="tabv2plain" id="tabv2plain-8">
<a onclick="myFunction14()" href="#collapseOneThree1">QESH Policy</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionA2" onclick="myFunction15()" href="#collapseOneFour">QESH OBJECTIVE</a>
</h4>
</div>
<div id="collapseOneFour" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div3">
<div class="tabv2plain" id="tabv2plain-9">
<a onclick="myFunction16()" href="#collapseOneFour1">QESH Objective</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- SECOND LEVEL ACCORDION END -->
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
<a data-toggle="collapse" data-parent="#accordionA1" onclick="myFunction17()" href="#collapseTwo">SUNWAY ENGINEERING </a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div4">
<div class="tabv2plain" id="tabv2plain-10">
<a onclick="myFunction18()" href="#collapseTwo1">QESH Manual</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
<a data-toggle="collapse" data-parent="#accordionA1" onclick="myFunction19()" href="#collapseThree">SUNWAY GEOTECHNICS </a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div5">
<div class="tabv2plain" id="tabv2plain-11">
<a onclick="myFunction20()" href="#collapseThree1">QESH Manual</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
<a data-toggle="collapse" data-parent="#accordionA1" onclick="myFunction21()" href="#collapseFour">SUNWAY CONCRETE PRODUCTS </a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div6">
<div class="tabv2plain" id="tabv2plain-12">
<a onclick="myFunction22()" href="#collapseFour1">QESH Manual</a>
</div>
</div>
</div>
</div>
</div>
</div>
</span>
</div>
<div class="col-md-8">
<span style="display:block; padding:10px;">
<div class="tabplaincontent">
<div class="tabv2plain-1" style="display:block;">
One Content
</div>
<div class="tabv2plain-2" style="display:none;">
Two Content
</div>
<div class="tabv2plain-3" style="display:none;">
Three Content
</div>
<div class="tabv2plain-4" style="display:none;">
Four Content
</div>
<div class="tabv2plain-5" style="display:none;">
Five Content
</div>
<div class="tabv2plain-6" style="display:none;">
Six Content
</div>
<div class="tabv2plain-7" style="display:none;">
Seven Content
</div>
<div class="tabv2plain-8" style="display:none;">
Eight Content
</div>
<div class="tabv2plain-9" style="display:none;">
Nine Content
</div>
<div class="tabv2plain-10" style="display:none;">
Ten Content
</div>
<div class="tabv2plain-11" style="display:none;">
Eleven Content
</div>
<div class="tabv2plain-12" style="display:none;">
Twelve Content
</div>
</div>
</span>
</div>
</div>
<div class="tab_icerik" style="display: none;">
<div class="col-md-4">
<span style="display:block;">
<div id="accordionB1" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
<a data-toggle="collapse" data-parent="#accordionB1" onclick="myFunction23()" href="#collapseFive">FINANCE & ADMIN</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse in">
<div class="panel-body">
<div class="group row clear" id="tabsv3plain">
<div class="tabv3plain" id="tabv3plain-1">
<a onclick="myFunction24()" href="#collapseFive1">General</a>
</div>
</div>
</div>
</div>
</div>
</div>
</span>
</div>
<div class="col-md-8">
<span style="display:block; padding:10px;">
<div class="tabplaincontent">
<div class="tabv3plain-1" style="display:block;">
Thirteen Content
</div>
<div class="tabv3plain-2" style="display:none;">
Fourteen Content
</div>
<div class="tabv3plain-3" style="display:none;">
Fifteen Content
</div>
<div class="tabv3plain-4" style="display:none;">
Sixteen Content
</div>
</div>
</span>
</div>
</div>
</div>
</div>
For above requirement, I added window.location.hash to uniquely identify each Accordion tab in URL.
Now, when I click on any of the Accordion tab, I can see a unique name (based on selected tab) with hash at the end in URL
Example:
localhost:49963/Test.aspx#collapseThree1
Again, when I copy the URL (which include a unique name for each selected tab) always the 1st Accordion tab is opened i.e., CONSTRUCTION --> Quesh Manual --> Quesh Manual ; in place of last selected tab by user. Still the same issue persist.
Any help will be much appreciated