JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div class="pull-right">
    <a id="button" class="btn">Settings</a>
</div>

<div id="modal" class="modal hide" style="overflow-y:hidden;width:auto;height:auto;max-height:100%; max-width:100% ">
    <div class="modal-body" style="overflow-y:hidden; width:auto; height:auto; max-height:100%; max-width:100%">
        <div id="accordion">

            <button id="openpanel1" type="button" class="btn" style="width:100%;text-align:left"><i
                    class="icon-search"></i>Page Information
            </button>
            <div id="panel1" class="collapse">
                <div class="panel-body">
                    Contents panel 1
                </div>
            </div>

            <button id="openpanel2" type="button" class="btn" style="width:100%;text-align:left">Additional Data
            </button>
            <div id="panel2" class="collapse">
                <div class="panel-body">
                    <div class="row">
                        <div class="span2" style="text-align:center">
                            <img src="http://placehold.it/140x140" class="img-rounded"
                                 style="width: 100px; height: 100px">

                            <div>Title 1</div>
                        </div>
                        <div class="span2" style="text-align:center">
                            <img src="http://placehold.it/140x140" class="img-rounded"
                                 style="width: 100px; height: 100px">

                            <div>Title 2</div>
                        </div>
                        <div class="span2" style="text-align:center">
                            <img src="http://placehold.it/140x140" class="img-rounded"
                                 style="width: 100px; height: 100px">

 ...

CSS

.panel-body{
    padding:10px;
}

JavaScript

var button = $('#button');
var dialog = $('#modal');
button.on('click', function () {
    dialog.toggleClass('hide');
    dialog.position({
        my: "right top",
        at: "right-2 bottom",
        of: button
    });
})


$("#openpanel1").on("click", function () {
    var curr_panel = $("#panel1")
    curr_panel.toggleClass('show hide');
    curr_panel.collapse(curr_panel.hasClass('show') ? 'show' : 'hide');
});

$("#openpanel2").on("click", function () {
    var curr_panel = $("#panel2")
    curr_panel.toggleClass('show hide');
    curr_panel.collapse(curr_panel.hasClass('show') ? 'show' : 'hide');
});

$("#openpanel3").on("click", function () {
    var curr_panel = $("#panel3")
    curr_panel.toggleClass('show hide');
    curr_panel.collapse(curr_panel.hasClass('show') ? 'show' : 'hide');
});


/* ensure any open panels are closed before showing selected */
$('#accordion').on('show.bs.collapse', function () {
    $('#accordion .in').collapse('hide');
});