using jquery clicking on Div1 , Div2 should be open/close....

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.

Edit:

This code is working good for me ,

http://stackoverflow.com/questions/3044331/how-to-make-jquery-slidetoggle-effect-for-multiple-div-on-same-page/3044662#3044662

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

Use jQuery to create an accordion control for you and only have divs as the base html.

So basically you have the accoridon plug in loaded and if javascript is enabled then the accordion will work else you will see a set of divs so that users can still see the data in the panesl.

is this what you're asking?

Answer 2

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>

Answer 3

try this:

$(function(){
     $("#div2").hide();
     $("#div1 #divIcon").text("+");

     $("#div1").click(function(){
        var t=$("#div1 #divIcon").text();
        if(t=='+'){
            $("#div1 #divIcon").text("-");
            $("#div2").show();
        }else{
            $("#div1 #divIcon").text("+");
            $("#div2").hide();
        }
     });
});

PS:- not tested but should work though there are many elegant ways and plugins to do this.

Answer 4

This hides div2 and adds the toggle button in the ready function, which obviously only happens if js is present.

The click is bound to a function to slide toggle div2 and change the button.

Style to taste.

<script type="text/javascript">
    $(document).ready(function(){
        $('#div2').hide();
        $('#div1').append('<span id="btn">+</span>');
        $('#btn').click(function(){
            $('#div2').slideToggle(600);
            $(this).text($(this).text() == '+' ? '-' : '+');
        });
    });

</script>

<div id='div1'><h2>div 1</h2></div>
<div id='div2'><h2>div 2</h2>Lorem ipsum dolor sit amet</div>

UPDATE: If the button should be an image, I'd recommend toggling the class of a div with a background image. Same ideas though.

<style>
#btn {float: right;width:16px; height:16px; }
.plus { background-image:url('plus-icon.gif');}
.minus { background-image:url('minus_icon.gif');}
</style>


$('#div2').hide();
$('#div1').prepend('<div id="btn" class="plus"></div>');
$('#btn').click(function(){
    $(this).toggleClass('plus').toggleClass('minus');
    $('#div2').slideToggle(600);
});

Answer 5

demo

fixed demo based on comments

css

.toggle img {
    display:none;
}​

html

<div class="toggle">Show Panel <img src="http://t3.gstatic.com/images?q=tbn:4TZreCjs_a1eDM:http://www.venice.coe.int/images/plus.png"&gt;&lt;/div&gt;
<div class="hidden">
Blah Blah Blah
</div>​

jQuery

$(".hidden").hide();
$('.toggle img').show();
$(".toggle").click(function(){
    $(".hidden").slideToggle("slow");
        $(this).html(function(i,html) {
            if (html.indexOf('Show') != -1 ){
               html = html.replace('Show','Hide');
            } else {
               html = html.replace('Hide','Show');
            }
            return html;
        }).find('img').attr('src',function(i,src){
        return (src.indexOf('plus.png') != -1)? 'http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png' :'http://t3.gstatic.com/images?q=tbn:4TZreCjs_a1eDM:http://www.venice.coe.int/images/plus.png';
    });
});