Dynamically reveal hidden divs

Question

Hi,

I have searched hi and low for a solution for this, basicly I would like a panel with a plus sign next to it and when the user clicks the plus the blank version of form 1 is replicated in a new panel that gets revealed after clicking the + sign:

______________________________
|    Form 1    |
|                   |
|                   |                    (+)

______________________________
|    Form 2    |
|                   |
|                   |                    (+)(-)

Also it would be handy to have the minus sign to remove the panel again.

Does anybody know of such and thing or can someone point me in the right direction.

Thanks for looking.

Answer 1

function cloneForm() {
  var form1 = document.getElementById( 'form1' );
  var form2 = form1.cloneNode( true );
  document.insertBefore( form2, form1.nextSibling );
}

This one clones the form. But if you want to clone the div the form is on, replace 'form's with 'div'.

Edit: fixed the typo

Answer 2

Lets assume you've got

<div id="wrap">
    <div class="duplicate">
        something
        <span class="plus">+</span>
    </div>
</div>

What you could do is:

$('span.plus').click(function() {
    new = $(this).parent().clone().appendTo('#wrap');
    $('<span class="minus">-</span>').insertAfter(new.children('span'))
        .click(function() {
            $(this).parent().remove();
        });

});

Not tested of course... ;)

Edit: Damn... I assumed you're using jQuery... But it should work in a similar way with any other Javascript framework.

Answer 3

It might be simpler to have the + and - links below the forms rather than moving as forms are added/deleted. Here's the JS:

var forms = 1;

function add() {
    var form1 = document.getElementById('form1');
    var newForm = form1.cloneNode(true);
    newForm.id = 'form' + ++forms;
    document.getElementById('forms').appendChild(newForm);
}

function subtract() {
    if (forms > 1) {
        document.getElementById('forms')
         .removeChild(document.getElementById('form' + forms--));
    }
}

and here's the HTML snippet:

<div id="forms">
    <div id="form1">
        something
    </div>
</div>

<p><a href="javascript:add()">+</a> <a href="javascript:subtract()">&minus;</a></p>

There are improvements that could be made, but this should keep you going for now.