Question

Does anyone know of a jQuery plugin that can meet the following requirement:

I have one DIV on the screen and a button.
When I click the button, the DIV splits into 2 (we’ll call these A and B).
Clicking the button again splits the parent DIV into 3 (so now we have A, B and C).

So far so good, however…

Clicking the button again will result with A split into two,
Clicking the button again will result with B split into two,
Clicking the button again will result with C split into two.

So as you can see, with 3 clicks of the button, I’d end up with the master DIV split into 1/3rds.

Clicking the button 4 times would result in having the master DIV containing 2 1/3rd size DIVs and 2 1/6th size DIVs.

I’m sure I’ve seen something similar somewhere, but can’t for the life of me remember where this was.

If anyone has any tips or know of a similar plugin I’d really appreciate it.

Answer 1

Let me code a prototype for you:

<div class="wrap">
    <a class="large button blue" id="split">Split!</a>
    <hr>
    <div class="inner">
        Test
    </div> 
</div>

---

$('#split').click(function() {

    width = parseInt($('.wrap').css('width'))-20;
    $('.wrap').append($('.wrap  .inner').first().clone());
    nDivs = $('.wrap .inner').size();
    $('.wrap  .inner').css('width', width/nDivs);

});

You can try and adjust margins etc: http://jsfiddle.net/mKuVm/4/