I have a pretty basic jQuery question and forgive me if it has already been answered. Basically I attempt to have a link slide down a div. This is fairly simple however I require multiple links sliding down their respective divs. I understand I can just name the links and divs unique classes and solve the problem that way, however this naturally also requires a duplication of the jQuery code for each link-div and i have a lot. I therefore need a general script. A simplified version of my situation is as follows:
HTML:
<div>
<a id=link1>toggle text 1</a>
<div class=link1>TEXT 1</div>
<a id=link2>toggle text 2</a>
<div class=link2>TEXT 2</div>
</div>
My attempt at a jQuery general script for this:
$(document).ready(function() {
$('[id^=link]').bind('click', function() {
var $div = $(this).attr('id');
if($('[class=' + div + ']').is(':visible')) {
$('[class=' + div + ']').slideUp();
} else {
$('[class=' + div + ']').slideDown();
}
return false;
});
});
But as one might expect since I'm writing here it does not work. I am thinking is has to do with the ^= but I can't figure out how to improve it.
Any thoughts?
Best Regards
Andreas
Wouldn't that work?
ReplyDelete$("a").click(function(){
$(this).next().slideToggle();
});
I would suggest having a common class on all your links, for example...
ReplyDelete<a id="link" class="link">
and you can select multiple with...
$(".link")
alternative, you could select all A tags....
$("a")
Two problems:
ReplyDeleteyou were declaring a variable $div but using div
to select by class, use .classname and not '[class=...]
Optimizations:
select your div and re-use the variable $divto avoid re-selecting 3 times the same element
in an event handler, this is the DOM element. To get its ID, just use this.id, not need for jquery
Here's the code:
$('[id^=link]').bind('click', function() {
var id = this.id,
$div = $('.' + id);
if ($div.is(':visible')) {
$div.slideUp();
} else {
$div.slideDown();
}
return false;
});
DEMO
I realise that others are suggesting alternatives, and I would encorage you to look at them. To answer your specific problem I believe it lies with the variable names:
ReplyDeleteThe lines of code with div in then, e.g.
if($('[class=' + div + ']').is(':visible')) {
Should possibly have $div instead.
You can try this more verbose example... hope this helps:
ReplyDelete<html>
<head>
<title>jQuery Test Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$('[id^=link]').bind('click', function () {
var myDiv = $(this).attr('id');
var isVis = $('[class=' + myDiv + ']').is(':visible');
if (isVis)
{
$('[class=' + myDiv + ']').slideUp();
}
else
{
$('[class=' + myDiv + ']').slideDown();
}
return false;
});
});
</script>
<div>
<a id="link1">toggle text 1</a>
<div class="link1">TEXT 1</div>
<a id="link2">toggle text 2</a>
<div class="link2">TEXT 2</div>
</div>
</body>
</html>