Many scripts will not initialize properly when the content they are trying to initialize is display: none; as is the case with the SEO Detail click Demo script you linked to. It hides the unseen details by making their display none.
However, you first must make sure that your multiple menus would work if the SEO Detail click Demo script were not used at all. If that works, you can try this updated version of the SEO Detail click Demo script that uses position and visibility to hide the unseen content:
Code:
<!DOCTYPE html>
<html>
<head>
<title>SEO Detail click Demo w/positioning</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {
background-color:white;
}
#triggers {
float:left;
border:1px solid #ccc;
}
#triggers div {
cursor:pointer;
}
#zero {
visibility:hidden;position:absolute;top:-30000px;left:-30000px;
color:red;
}
#first {
color:blue;
}
#second {
color:green;
}
#third {
color:#a52a2a;
}
</style>
<script type="text/javascript">
if(document.getElementById)
document.write('<style type="text/css">.detail {float:left;visibility:hidden;position:absolute;top:-30000px;left:-30000px;}#zero {visibility:visible;position:static;}<\/style>');
function reveal(det){
if(!document.getElementById) return;
if (!document.getElementsByClassName){
document.getElementsByClassName = function(cn){
cn = cn.replace(/ +/g, ' ').split(' ');
var ar = [], testname = function(n){
for (var re, i = cn.length - 1; i > -1; --i){
re = new RegExp('(^|\W)' + cn[i] + '(\W|$)');
if(!re.test(n)) return false;
}
return true;
}
for(var d = document.all || document.getElementsByTagName('*'), i = 0; i < d.length; ++i)
if(testname(d[i].className))
ar[ar.length] = d[i];
return ar;
};
document.getElementsByClassName.spoof = true;
}
for (var d = document.getElementsByClassName('detail'), i = d.length - 1; i > -1; --i){
d[i].style.visibility = 'hidden';
d[i].style.position = 'absolute';
}
document.getElementById(det).style.visibility = 'visible';
document.getElementById(det).style.position = 'static';
if (document.getElementsByClassName.spoof)
document.getElementsByClassName.spoof = document.getElementsByClassName = null;
}
</script>
</head>
<body>
<div id="triggers">
<div onclick="reveal('first');">
1st Trigger
</div>
<div onclick="reveal('second');">
2nd Trigger
</div>
<div onclick="reveal('third');">
3rd Trigger
</div>
</div>
<div class="detail" id="zero">
This would be what people would see at page load.
</div>
<div class="detail" id="first">
This would be what people would see for the first clicked content.
</div>
<div class="detail" id="second">
This would be what people would see for the second clicked content.
</div>
<div class="detail" id="third">
This would be what people would see for the third clicked content.
</div>
</body>
</html>
The browser cache may need to be cleared and/or the page refreshed to see changes.
If you want more help, please post a link to the page on your site that contains the problematic code so we can check it out.
Div swap affecting child scripts
Reply With Quote
Bookmarks