JSFiddle - React, Tailwind, and code Playground

by bmarsh123

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.1/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="accordion" id="accordion2">
    <div class="accordion-heading"> <a class="accordion-toggle buttonAccordionToggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Row 1</a>
    </div>
    <div id="collapseOne" class="accordion-body collapse">
        <div class="accordion-inner">
            <div class="control-group" style="min-height: 150px;">
                <div class="row-fluid show-grid">
                    <div class="span12">
                        <div class="span1">
                            <label>Name:</label>
                        </div>
                        <div class="span11">
                            <label class="labelAccordionName">First Name</label>
                        </div>
                    </div>
                </div>
                <div class="row-fluid show-grid">
                    <div class="span12">
                        <div class="span2">
                            <label>Location:</label>
                        </div>
                        <div class="span10">
                            <label class="labelAccordionLocation">Somewhere 1</label>
                        </div>
                    </div>
                </div>
                <div class="row-fluid show-grid">
                    <div class="span12">
                        <a id='select' class='btn'>Select</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="accordion-heading">
        <a class="accordion-toggle buttonAccordionToggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">Row 2</a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
        <div class="control-group" style="min-height: 150px;">
           ...

JavaScript

$(document).ready(function () {
    // On dropdown change, pass in value to populate accordion/details
    $('#dd').change(function () {
        var r = $(this).val();
        location.href = "test.php?src=" + r;
    });

    // Hide the accordion and show the hidden div
    $('a.btn').click(function () {
        $('#accordion2').hide();
        $('#divDetails').show();

        // Pass the label value from the accordion row to the hidden div label
        $('#labelName').html($('.accordion-body.in .labelAccordionName').html());
        $('#labelLocation').html($('.accordion-body.in .labelAccordionLocation').html());
    });

    // Hide the div and show the accordion again
    $('#close').click(function () {
        $('#accordion2').show();
        $('#divDetails').hide();
    });

    // Only allows one row to be shown at a time
    $('.accordion-toggle').click(function() {
        var $acc = $('#accordion2');
        $acc.on('show', '.collapse', function() {
            $acc.find('.collapse.in').collapse('hide');
        });
    });
});