Question

I want to add a + button to div 1 only if JavaScript enabled (otherwise it should not be there) and when user will click on + button then div 2 will be open/close like accordion.

if div 2 is opened then + icon should be changed into -

by default div 2 should be closed and if JavaScript would be disabled then it should open by default and +/- icon should be hidden.

I want to do this with jquery.

alt text http://shup.com/Shup/374246/1106191530-My-Desktop.png

Edit:

This code is working good for me ,

How to make jQuery slidetoggle effect for multiple div on same page?

I just want to add +/- icon also using JavaScript, if JavaScript would be disabled then it should open by default and +/- icon should be hidden.

I will use image of + and - not text.

Answer 1

This answer shows div2 and hides the plus when no JS.

A background image on the plus span is used instead of an img tag as semantically it isn’t an image but a button which is represented in image form.

CSS:

.plusClass 
{ 
    display: none; 
    width:IMGWIDTH; 
    height: IMGHEIGHT; 
    float:right; 
    display: block;
    margin-right: 15px;
}
    .contracted .plusClass { background-image: url('plus.png'); }
    .expanded .plusClass { background-image: url('minus.png'); }

.div2class { display: block; }

HTML:

<div class="div1">Title<span class="plusClass"></span></div>
<div class="div2">Content</div2>

JS:

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.plusClass').show();
    $('.div2class').hide();
    $('.plusClass').addClass('plusContracted');
    $('.plusClass').click(function() {
        $(this).parent().next().toggle;
        /* Thanks to Chadwick for toggleClass */
        $(this).parent().toggleClass('expanded').toggleClass('contracted'); 
    });
});
</script>