Div Layout Using Javascript

Div layout using Javascript If i click on + it should be open and it again click on - it should be close it is working fine but what i need to is that if there are more div how to

Solution 1:

Don't hardcode the selector of the divs. This way you can expand it beyond a single div.

Use something like this:

$('button').on('click',function(){
    $(this).parent('div').css({'width' : '50%'});
});

Example

Solution 2:

Use relative paths/ e.g.

$(this).parent().css("width","50%");

So you always style the box that contains the (+/-) element that has been clicked.

You'll need to adapt your $(".box1") showing/hiding code, too; and as Pulkit said - you should use classes instead of ids. (select the child with the class ("box1") beneath the parent is:

$(this).parent().children("#box1")

Solution 3:

Try giving a different id to each div element and also give the class and perform the jQuery function with id (#) instead of class (.)