Essayer d'étendre dynamiquement différentes divs avec une fonction

Question

J'essaie d'être en mesure d'étendre/réduire dynamiquement plusieurs divs avec le même code ....

il est contrôlé avec le clic d'une travée (bascule) et alors je suis en train d'obtenir le prochain id (div qui glisser vers le haut et vers le bas)

  $('span').toggle(
    function() { 
$('#albumholder').slideToggle(600); 
    $(this).html('-');}, 
    function() { 
$('#albumholder').slideToggle(600); 
    $(this).html('+');} 

    ); 

Ce code fonctionne à 1 div ... élargir mais suppose que j'ai un divs

#downloadholder
#linksholder
etc... 

Comment puis-je obtenir la même effet avec le même code? Merci!

EDIT

Il convient de noter que je dois chaque div pour basculer de façon indépendante. Si je clique sur le bouton plus sur la durée qui touche #albumholder, il ne devrait pas étendre #downloadholder ou #linksholder

Answer 1

Deux façons -

les ajouter dans le sélecteur

$('#downloadholder, #linksholder') 

ou ajouter une classe à ces articles

$('.toExpand') 

<div id="downloadholder" class="toExpand" /> 
<div id="linksholder" class="toExpand" /> 

Relecture votre question, il est peut-être que vous voulez obtenir le next div?

$('#yourSpanElement').click(function() { 
    $span = $(this); 
    $yourDiv = $span.next('div'); 
    // do your magic :) 
}); 

votre code peau neuve:

$('span').toggle(
    function() { 
     var $span = $(this); 
     $span.next('div').slideToggle(600); 
     $span.html('-'); 
    },  
    function() { 
     var $span = $(this); 
     $span.next('div').slideToggle(600); 
     $span.html('+'); 
    } 
); 

vous pouvez également vérifier l'apparence suivante divs:

$('span').click(function() { 
    var $span = $(this); 
    var $nextDiv = $span.next('div'); 
    if($nextDiv.is(':visible')) { 
    $nextDiv.slideUp(600); 
    $span.html('+'); 
    }else { 
    $nextDiv.slideDown(600); 
    $span.html('-'); 
    } 
}); 

Answer 2

vous Faire htmlr quelque chose comme ça.

<span toggletarget="downloadholder>+</span> 
<div id="downloadholder"></div> 

puis faites votre javascript

$('span[toggletarget]').click(function() {$(this).toggle(
function() { 
    $("#"+$(this).attr("toggletarget")).slideToggle(600); 
    $(this).html('-');}, 
function() { 
$('#albumholder').slideToggle(600); 
$(this).html('+');} 
);});