jquery open accordion from link
Question
What am I doing wrong. The accordion works, but when I try to open it from external link (fx. mysite.com/mypage.php#2) - it wont open the accordion!
My header is:
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#accordion").accordion({
active: false,
collapsible: true,
autoHeight: false,
navigation: true,
header: '.menuitem'
});
$(".menuitem").click(function(event){
window.location.hash=this.hash;
});
});
</script>
My html is:
<div id="accordion">
<a class="menuitem" href="#1">Header 1</a>
<!-- accordion panel --><div>
CONTENT 1</>
<!-- end accordion panel --></div>
<a class="menuitem" href="#2">Header 2</a>
<!-- accordion panel --><div>
CONTENT 2</>
<!-- end accordion panel --></div>
<!-- end accordion -->
5 answers
solution1
3 ACCPTED 2014-02-21 11:47:45
Here is the working code - Jsfiddle Link
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#accordion").accordion({
active: false,
collapsible: true,
autoHeight: false,
navigation: true,
header: 'a.menuitem'
});
$(".menuitem").click(function(event){
window.location.hash=this.hash;
});
//get the hash value
var locationHash = window.location.hash;
//split the value
var hashSplit = locationHash.split('#');
//get the tab number
var currentTab = hashSplit[1];
window.setTimeout(function(){
//open the tab for the current hash
$("#accordion").accordion({ active: parseInt(currentTab)-1 });
}, 1000);
});
</script>
</head>
<body>
<div id="accordion">
<a class="menuitem" href="#1">Header 1</a>
<!-- accordion panel -->
<div>
CONTENT 1
</div>
<a class="menuitem" href="#2">Header 2</a>
<div>
CONTENT 2
</div>
<!-- end accordion -->
</div>
</body>
</html>
solution2
1 2018-03-31 07:43:07
@Ashis Your code works perfectly only, every DIV has the same size, so, when I have a DIV with 2 lines, there is a lot of white space beneath. When it contains a lot of information, the DIV is nicely filled.
solution3
0 2014-02-21 11:16:46
if ($.url().hash.length) {
var item = $.url().hash;
$('#accordion').accordion({active: item - 1}); // since you started numbering at 1 and not 0.
}
solution4
0 2014-02-21 11:17:51
You can do something like this, though not a perfect solution:
$(document).ready(function() {
var $hash = window.location.hash;
var $acc = $hash ? $hash : 1;
$("#accordion").accordion({
active: false,
collapsible: true,
autoHeight: false,
navigation: true,
header: '.menuitem',
activate: $acc
});
});
Many changes might be required..
solution5
-1 2014-02-21 11:16:30
Your accordeon is a dynamic element in your page (driven with some javascript code).
Setting an html anchor in your url (like #2) will not trigger the accordeon code, you are simply instructing the browser to navigate to the anchored element !
You will need to add some javascript code to your page to get the value of the anchor and pass this parameter to your accordeon widget.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.