roxstyle wrote:
http://www.roxstyle.com/projects/blssi/cms/user-tools/user-contract-details.html
on this page there is one link system using toggle,
for the link"Add More Existing Accounts"
and this works,
but on pages where the system is used more than once, such as:
http://www.roxstyle.com/projects/blssi/cms/user-tools/user-user-details.html
you can see that the link "text" is doubling and each link toggles
BOTH hidden areas.
i would like to make this functionality "global" so i could use it
more than once on a page. are there samples of anything similar to
this? I'm going demo bonkers about now.
This is what you are telling jQuery to do:
- select all elements with class ".togMenu"
- add a toggle switch to them which shows or hides all elements
with class ".togContent".
That's happening correctly on both pages. The problem is that you want
specific .togMenus connected to particular .togContents. There are
several ways to do this. The simplest would probably be to use ids on
both the link and the content, then call your function like this:
menuToggler("#togMenu1", "#togContent1");
menuToggler("#togMenu2", "#togContent2");
Another possibility, if you want your JavaScript identical on all pages,
especially if there might be dynamic sets of togglers, would be to use
ids, but make the relationship between them automatic with something
like (untested):
<a href="#" class="togMenu" id="link_contact">Close Contact</a>
<div class="insert togContent" id="contact">...</div>
$("a.togMenu").toggle(function() {
var targetId = this.id.substring(5); // link_xzy => xyz
$("#" + targetId).show("slow");
}, function() {
var targetId = this.id.substring(5);
$("#" + targetId).hide("slow");
});
I hope that's enough to get you going.
Good luck,
-- Scott
