I'm newbie in web development.
If I use the adress "www.xxxxxx.com/test.html#chgd", the second accordion should be expanding. It works perfectly for Chrome but not for Firefox and Explorer.
What is the problem in the source code that works for Chrome but not for Firefox and Explorer?
I also have used 'window.location.hash;' but unfortunately, same problem occur.
Thanks!
<pre lang="xml"><!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link href="C:\Users\h\Desktop\test\bootstrap-theme.css" rel="stylesheet"/>
<link href="C:\Users\h\Desktop\test\bootstrap.css" rel="stylesheet"/>
<script src="C:\Users\h\Desktop\test\jquery-1.11.2.min.js"></script>
<script src="C:\Users\h\Desktop\test\bootstrap.min.js"></script>
<script>
jQuery(document).ready(function() {
var url = = document.location.toString();
if ( url.match('#') ) {
var hash = url.split('#')[1];
// collapse the expanded panel
$('#accordion .accordion-collapse').removeClass('in');
// expand the requested panel
$('#' + hash + '_c').addClass('in');
}
});
</script>
</head>
<body>
<div id="accordion" class="accordion-group">
<div class="panel">
<h4 id="cs" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#cs_c">Child Survival: Boosting Immunity and Managing Diarrhoea</a></h4>
<div id="cs_c" class="accordion-collapse collapse in">
<p>...</p>
</div>
<h4 id="chgd" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#chgd_c">Child Health, Growth and Development: Preventing Mental Impairment with Iodine and Iron</a></h4>
<div id="chgd_c" class="accordion-collapse collapse">
<p>...</p>
</div>
<h4 id="wmnh" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#wmnh_c">Women’s and Newborn Survival and Health: Iron Supplementation and Food Fortification</a></h4>
<div id="wmnh_c" class="accordion-collapse collapse">
<p>...</p>
</div>
</div>
</div>
</body>
</html>