Hi,
I am in need of some help around showing and hiding a div based on a user selecting a link via tabbing (note its only tabbing I need help with, got the mouse actions sorted). Basically I have a set of links at the top of my page and a set of closely related links at the bottom with the visibility set to hidden. I pull these links into a popup menu when the top links are tabbed over.
I am creating a tabindex on the fly, so users with JS enabled will jump from the top link into the popup menu, and users without will not get any tabindex and will just follow the natural tabbing order. So a user with JS should go from the 1st tab into the 1st box and through all those links, and then to the 2nd tab and 2nd box and so on...
I can make the box areas appear, and the tab order alters to jump into the generated area but I cant get them to dissapear. And I only want one area to appear at any one time.
I have stripped my code down to the bare bones so I should just be a matter of dropping it into your editor to see where I am at, or more like where I am not at.
Any help would be much appreciated
Cheers
Charlie.
<!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=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/global.js"></script>
<script type="text/javascript">
addLoadEvent(topAreaLinks);
addLoadEvent(addTabIndex);
addLoadEvent(fireListeners);
//addLoadEvent(subListeners);
/** Give top area a tabindex in increments of 1 so this is always the area tabbed through first **/
function topAreaLinks() {
var localTabindex = 1;
var topSectionLinks = document.getElementById("top").getElementsByTagName("a");
for (var i = 0; i < topSectionLinks.length; i++) {
topSectionLinks[i].setAttribute("tabIndex", localTabindex);
localTabindex ++;
}
}
/** Give top links a tabindex value in increments of 100 **/
function addTabIndex() {
var ins = document.getElementById("ins");
ins.setAttribute("tabIndex", "100");
var cards = document.getElementById("cards");
cards.setAttribute("tabIndex", "200")
var loans = document.getElementById("loans");
loans.setAttribute("tabIndex", "300")
var mort = document.getElementById("mort");
mort.setAttribute("tabIndex", "400")
var save = document.getElementById("save");
save.setAttribute("tabIndex", "500")
var travel = document.getElementById("travel");
travel.setAttribute("tabIndex", "600")
}
/** Event Listeners **/
function fireListeners() {
var tabLinks = document.getElementById("nav-primary").getElementsByTagName("a");
for (var i = 0; i < tabLinks.length; i++) {
var currentTab = tabLinks[i];
addEvent(currentTab, 'focus', openPopup, false);
//addEvent(currentTab, 'blur', closePopup, false);
}
}
/** Open the popup when you tab onto the top links **/
function openPopup(e) {
if (window.event) {
var links = window.event.srcElement.id;
window.event.cancelBubble = true;
window.event.returnValue = false;
} else {
var links = e.target.id;
e.stopPropagation();
e.preventDefault();
}
//if box is already there find out where the focus is
var popUpsection = links + "-products-box";
var currentSection = document.getElementById(links)
var parent = document.getElementById("wrapper");
var thisSection = getElementsByClassName(parent, "div", popUpsection);
var globalTabIndex = currentSection.getAttribute("tabindex");
for (var i = 0; i < thisSection.length; i++) {
thisSection[i].style.visibility = "visible";
var sectionLinks = thisSection[i].getElementsByTagName("a");
var localTabIndex = globalTabIndex;
for (var j = 0; j < sectionLinks.length; j++) {
sectionLinks[j].setAttribute("tabIndex", localTabIndex)
localTabIndex++;
}
}
}
/** Close the popup when you taboff **/
function closePopup(e) {
if (window.event) {
var links = window.event.srcElement.id;
window.event.cancelBubble = true;
window.event.returnValue = false;
} else {
var links = e.target.id;
e.stopPropagation();
e.preventDefault();
}
var section = links + "-products-box";
var parent = document.getElementById("wrapper");
var thisSection = getElementsByClassName(parent, "div", section);
thisSection[0].style.visibility = "hidden";
}
</script>
</head>
<body>
<!-- Top section -->
<div id="top">
<!-- Branding and My account login -->
<div id="branding" class="clearing">
<div id="logo"><img src="" alt="" width="337" height="32" /></div>
<div id="myacc">
<h2>My accounts</h2>
<p>Logon or register</p>
<a href="login.html">Login</a>
</div>
</div><!--/ Branding and My account login -->
<!-- Breadcrumb and Metafaq -->
<div id="orientation" class="clearing">
<div id="breadcrumb-signup">
<dl class="clearing">
<dt><a href="http://www.blah.com">blah.com</a></dt>
</dl>
<p>Welcome to Blah . we hope you enjoy your visit. <a href="signup.html">(Sign in / Register )</a></p>
</div>
<div id="ask" class="round corner-whitebg">
<h2>Got a question?</h2>
<a href="ask.html">Ask</a>
</div>
</div><!-- Breadcrumb and Metafaq -->
</div>
<!--/ Top section -->
<div id="wrapper">
<!-- Primary content -->
<div id="primary-content">
<!-- Primary Navigation -->
<div id="nav-primary">
<ul class="clearing">
<li><a href="insurancetab.html" id="ins">Insurance</a></li>
<li><a href="cardstab.html" id="cards">Credit cards</a></li>
<li><a href="loandtab.html" id="loans">Loans</a></li>
<li><a href="morttab.html" id="mort">Mortgages</a></li>
<li><a href="savetabl.html" id="save">Savings</a></li>
<li id="last"><a href="traveltab.html" id="travel">Travel</a></li>
</ul>
</div><!-- Primary Navigation -->
</div>
<div class="ins-products-box" style="visibility:hidden">
<div id="innerbox">
<div id="productslinks" class="clearing">
<div id="prodleft">
<ul>
<li><a href="carins.html">Car insurance</a>
<ul><li><a href="carinsquote.html">Get a and buy car online</a></li></ul>
</li>
<li><a href="breakdown.html">Car breakdown</a>
<ul><li><a href="breakdownquote.html">Get a and breakdown buy online</a></li></ul>
</li>
<li><a href="life.html">Life insurance</a>
<ul><li><a href="lifequote.html">Get a and buy online</a></li></ul>
</li>
</ul>
</div>
<div id="prodright">
<ul>
<li><a href="home.html">Home insurance</a>
<ul><li><a href="homequote.html">Get a and buy home online</a></li></ul>
</li>
<li><a href="pet.html">Pet insurance</a>
<ul><li><a href="petquote.html">Get a and buy online</a></li></ul>
</li>
<li><a href="travel.html">Travel insurance</a>
<ul><li><a href="travelquote.html">Get a and buy online</a></li></ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="cards-products-box" style="visibility:hidden">
<div id="innerbox">
<div id="productslinks" class="clearing">
<div id="prodleft">
<ul>
<li><a href="carins.html">Car insurance</a>
<ul><li><a href="carinsquote.html">Get a and buy car online</a></li></ul>
</li>
<li><a href="breakdown.html">Car breakdown</a>
<ul><li><a href="breakdownquote.html">Get a and breakdown buy online</a></li></ul>
</li>
<li><a href="life.html">Life insurance</a>
<ul><li><a href="lifequote.html">Get a and buy online</a></li></ul>
</li>
</ul>
</div>
<div id="prodright">
<ul>
<li><a href="home.html">Home insurance</a>
<ul><li><a href="homequote.html">Get a and buy home online</a></li></ul>
</li>
<li><a href="pet.html">Pet insurance</a>
<ul><li><a href="petquote.html">Get a and buy online</a></li></ul>
</li>
<li><a href="travel.html">Travel insurance</a>
<ul><li><a href="travelquote.html">Get a and buy online</a></li></ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Before you post, read our: 
