One link needs to toggle different elements depending upon the url when it's clicked - HOW THE HELL?
I have a single page which uses tabs to segment the content. Alongside the tabs themselves is a button for 'Help'. I'd like this button to open a different DIV depending upon the tab that is currently being used.
For example, if I am on a tab for 'Ben', if I click the 'Help' button I want the 'helpBen' DIV to slideToggle. If I am on a tab for 'Paul', when I click the 'Help' button I want it to open the 'helpPaul' div.
Some extra needs:
1. switching to a different tab should close the currently open help div (e.g. helpBen or helpPaul)
2. There should only be one help div (e.g. helpBen or helpPaul) open at any one time.
I partly solved this with the following code but with erratic results and I'd like to know what I'm dong so wrong!
Here is the HTML for the help button:
- <a class="helpTrigger" href="#">Help</a>
The help DIV's are like this:
- <div class="helpBen">help relevant to Ben section</div>
- <div class="helpPaul">help relevant to Paul section</div>
The CSS for .help is display: none; by default so none are shown from the outset.
And here is the jQuery
- $(".helpTrigger").click(function(){
if (location.hash == '#Ben') {
$(".helpBen").toggleClass("help");
return false;
}
if (location.hash == '#Paul') {
$(".helpPaul").toggleClass("help");
return false;
}
});
- // help button
$(".helpTrigger").click(function(){
$(this).toggleClass("hover");
$(".help").slideToggle("slow");
return false;
});
In the words of Dr Evil, "throw me a frikkin' bone here..."