$(document).ready(function(){ 
    $('a.minimize').click(function() {
    $($(this).attr('href').siblings(".content")).slideToggle("slow", function() {})
});
});

3 answers

danwellman 5600
1
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...

Answered about 9 years ago by danwellman
  • the code u write same as mine,no toggle the a href target > class content ,when click the a.minimize has no function weiloon1234 about 9 years ago
  • 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... danwellman about 9 years ago
  • 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... danwellman about 9 years ago
o.k.w 2355
0
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.

Answered about 9 years ago by o.k.w
0
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???

Answered about 9 years ago by weiloon1234
  • Refer to my updated answer. o.k.w about 9 years ago