préfixe + et - à l'aide divs jquery

Question

j'ai script accordéon jquery comme ça ..

<script type='text/javascript'> 
$(document).ready(function() { 
    $('div.Syb> div').hide(); 
    $('div.Syb> h4').click(function() { 
    $(this).next('div').slideToggle('fast') 
    .siblings('div:visible').slideUp('fast'); 
    }); 
}); 
</script> 

je dois montrer + et - symbole avant la div ..pour montrent que son .. sont effondrés Agrandi et

Comment puis-je le faire?

Answer 1

Si vous n'êtes pas démenait Internet Explorer 7 ou moins, vous pouvez le faire en CSS, qui est l'endroit où il devrait être idéalement (comme il est exposé, ne se contente pas):

div.Syb> div:before 
{ 
    content: '+'; 
} 
div.Syb> div.hidden:before 
{ 
    content: '-'; 
} 

Ou vous pouvez jouer avec des images de fond.

Ensuite, il suffit d'utiliser toggleClass() pour donner à votre div une classe .hidden.

Si vous voulez le faire en jQuery directement vers le haut, vous aurez probablement changer votre balisage un peu:

<div class="Syb"> 
    <h4><span>+</span>Title One</h4> 
    <div id="one">Text</div> 
    <h4><span>+</span>Title Two</h4> 
    <div id="two">Text</div> 
    <h4><span>+</span>Title Three</h4> 
    <div id="three">Text</div> 
</div> 

Ensuite, vous pouvez simplement changer votre jQuery en tant que tel:

<script type='text/javascript'> 
$(document).ready(function() { 
    $('div.Syb> div').hide(); 
    $('div.Syb> h4').click(function() { 
     var span = $(this).children('span:first'); 
     span.text(span.text()=='+'?'-':'+'); 
     $(this).next('div').slideToggle('fast') 
      .siblings('div:visible').slideUp('fast'); 
    }); 
}); 
</script>