Question

i have jquery accordion script like this..

<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>

i need to show + and – symbol before the div ..to show that its expanded and collapsed..

how do i do it.?

Answer 1

If you’re not fussed about Internet Explorer 7 or less, then you can do this in CSS, which is where it should be ideally (as it is presentation, not content):

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

Or you could play around with background images.

Then just simply use toggleClass() to give your div a .hidden class.

If you want to do it in straight up jQuery, you’ll probably have to change your markup a little:

<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>

Then you can simply change your jQuery as such:

<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>