$(document).ready(function(){
$('a.minimize').click(function() {
$($(this).attr('href').siblings(".content")).slideToggle("slow", function() {})
});
});
3 answers
point
Couple of issues, change the script to this:
$(document).ready(function(){
$('a.minimize').click(function() {
$(this).siblings(".content").slideToggle("slow");
});
});
You had an extra $() that wasn't needed inside the click-handler callback function. Also, there's no point supplying an empty function as the value of the second argument to the slideToggle() method - if you aren't going to do anything after the animation ends, just don't supply the second argument...
- the code u write same as mine,no toggle the a href target > class content ,when click the a.minimize has no function
- The code is subtly different, the third line of your code starts $($( etc... Also, the attr() method returns a simple string, not a jQuery object, which can't be chained, so you don't want to call the attr() method in this case...
- Also, it's difficult to say why it isn't working without seeing the HTML page, but if the link with the class minimize has a sibling element with the class content then it should work...
points
HTML:
<a class="minimize" href="#targetElem" >Min</a>
<div id="targetElem">
<p class="handler"></p>
<div class="content">
content area
</div>
</div>
The jQuery selector would be the href of the anchor which is the ID of the target element plus the content class itself: $('#targetElem .content') in this case.
The code will then be:
$(document).ready(function(){
$('a.minimize').click(function() {
$($(this).attr('href') + ' .content').slideToggle('slow');
// the above line gives $('#targetElem .content').slideToggle('slow');
});
});
PS: I have no idea what is the p.handler for, so I just preserved it.
points
the html is
<a class="minimize" href="#targetElem" >Min</a>
<div id="targetElem">
<p class="handler"></p>
<div class="content">
content area
</div>
</div>
the javascript is the following code
$(document).ready(function(){
$('a.minimize').click(function() {
$($(this).attr('href')).siblings(".content").slideToggle("slow");
});
});
what i want is , when click on the a href class minimize , the target of the href (#targetElem)no change, but select the #targetElem siblings(div class="content") animate, bcos i want to use them over and over,i don't want to add a lot of code to the .js file like the following code:
$(document).ready(function(){
$('a.minimize').click(function() { $('#targetElem').siblings(".content").slideToggle("slow");
});
$('a.minimize1').click(function() { $('#targetElem1').siblings(".content").slideToggle("slow");
});
$('a.minimize2').click(function() { $('#targetElem2').siblings(".content").slideToggle("slow");
});
$('a.minimize3').click(function() { $('#targetElem3').siblings(".content").slideToggle("slow");
});
});
so how can i do this???
- Refer to my updated answer.
