JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<!-- Disregard all HTML, nothing interesting here -->
<a href="#" id="add">Add</a> <a href="#" id="rearrange">Rearrange Sections</a>
<div id="autosettings"><input type="checkbox" id="autoarrange" name="autoarrange"> <label for="autoarrange">Automatically Rearrange Sections?</label></div>
<div id="wrap">
    <div class="section" id="section1" title="Click to close">Preloaded section, <var>#1</var></div>
    <div class="section" id="section2" title="Click to close">Another preloaded section, <var>#2</var></div>
</div>

CSS

/* Disregard all CSS, nothing interesting here too */
body {font-family: "Trebuchet MS", sans-serif; font-size: 90%; overflow-x: hidden;}
a, #autosettings {display: inline-block; padding: 3px 5px; border: 1px solid #999; color: #006688;}
a {text-decoration: none; font-weight: bold; margin: 0 2px 3px 0;}
a:hover, a:active, #autosettings:hover {background: #FAFAFA; border-color: #555;}
#autosettings {float: right; margin-right: 75px;}
input[type="checkbox"] {vertical-align: -2px;}
label {font-weight: bold; color: #006688; cursor: pointer;}
#wrap {clear: both;}

.section {border: 1px solid #777; padding: 5px; background: #E8E8E8; margin: 10px 0; cursor: pointer; width: 740px;}
a, .section, #autosettings {border-radius: 3px;}
.section:hover {border-color: #555; background: #E2E2E2;}
.live {background-color: #FFCC00; width: 10px; overflow-x: hidden; white-space: nowrap;}

JavaScript

// OVER HERE! This is the magical bit:
    $('wrap').addEvent('click:relay(.section)', function(){
        this.set('slide', {
            duration: 250,
            transition: 'quint:in',
            onComplete: removeSection.bind(this)
        });
        this.slide('out');
    });

/* The relay method will work after I add the Element.Delegation class to our MooTools More.
*  You can ignore the next parts, just a demonstration of adding to the DOM after it loads. And a little MooTools playground :-D */

updateSectionIDNumber();
$('add').addEvent('click', function(ev){
    ev.preventDefault();
    var newSection = new Element('div', {
        'html': 'A new section, ID <var>#' + sectionIDNumber + '</var>',
        'title': 'Click to close',
        'class': 'section live',
        'id': 'section'+sectionIDNumber
    });
    sectionIDNumber++;
    $('wrap').grab(newSection);
    var fadeSection = new Fx.Morph(newSection, {
        duration: 600,
        transition: 'quint:out',
        onComplete: function(){
            newSection.setStyles({
                'overflow-x':'auto',
                'white-space':'normal'
            });
        }
    });
    fadeSection.start({
        'background-color': '#E8E8E8',
        'width': '740px'
    });

});

var automaticRearrange;
$('rearrange').addEvent('click', rearrange.bindWithEvent());
$('autoarrange').addEvent('click', function(){
    var isAutoArrangeOn = this.get('checked');
    if(isAutoArrangeOn) {
        automaticRearrange = true;
        rearrange();
        $('rearrange').hide()
    } else {
        automaticRearrange = false;
        $('rearrange').show()
    }
});

function rearrange(ev) {
    if(ev) ev.preventDefault();
    var sections = $$('.section').length;
    if (sections) {
        $$('.section').each(function(section, i){
            newID = i + 1;
            section.set('id', newID);
            section.getElement('var').set('html', '#' + newID);
            if (automaticRearrange)...