Bootstrap Dropdown userlist


	<br><br>
<div class="container">
 <div class="well span8 offset2">
        <div class="row-fluid user-row">
            <div class="span1">
                <img class="img-circle" src="http://api.randomuser.me/portraits/women/49.jpg" alt="User Pic">
            </div>
            <div class="span10">
                <strong>Cyruxx</strong><br>
                <span class="text-muted">User level: Administrator</span>
            </div>
            <div class="span1 dropdown-user" data-for=".cyruxx">
                <i class="icon-chevron-down text-muted"></i>
            </div>
        </div>
        <div class="row-fluid user-infos cyruxx">
            <div class="span10 offset1">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">User information</h3>
                    </div>
                    <div class="panel-body">
                        <div class="row-fluid">
                            <div class="span3">
                                <img class="img-circle" src="http://api.randomuser.me/portraits/women/49.jpg" alt="User Pic">
                            </div>
                            <div class="span6">
                                <strong>Cyruxx</strong><br>
                                <table class="table table-condensed table-responsive table-user-information">
                                    <tbody>
                                    <tr>
                                        <td>User level:</td>
                                        <td>Administrator</td>
                                    </tr>
                                    <tr>
                                        <td>Registered since:</td>
                                        <td>11/12/2013</td>
                                    </tr>
                                    <tr>
                                        <td>Topics</td>
                                        <td>15</td>
                                    </tr>
                                    <tr>
                                        <td>Warnings</td>
                                        <td>0</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer">
                        <button class="btn  btn-primary" type="button" data-toggle="tooltip" data-original-title="Send message to user"><i class="icon-envelope icon-white"></i></button>
                        <span class="pull-right">
                            <button class="btn btn-warning" type="button" data-toggle="tooltip" data-original-title="Edit this user"><i class="icon-edit icon-white"></i></button>
                            <button class="btn btn-danger" type="button" data-toggle="tooltip" data-original-title="Remove this user"><i class="icon-remove icon-white"></i></button>
                        </span>
                    </div>
                </div>
            </div>
        </div>


        <div class="row-fluid user-row">
            <div class="span1">
                <img class="img-circle" src="http://api.randomuser.me/portraits/women/48.jpg" alt="User Pic">
            </div>
            <div class="span10">
                <strong>Nibbler</strong><br>
                <span class="text-muted">User level: Moderator</span>
            </div>
            <div class="span1 dropdown-user" data-for=".alexanderMahrt">
                <i class="icon-chevron-down text-muted"></i>
            </div>
        </div>
        <div class="row-fluid user-infos alexanderMahrt">
            <div class="span10 offset1">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">User information</h3>
                    </div>
                    <div class="panel-body">
                        <div class="row-fluid">
                            <div class="span3">
                                <img class="img-circle" src="http://api.randomuser.me/portraits/women/48.jpg" alt="User Pic">
                            </div>
                            <div class="span6">
                                <strong>Alexander Mahrt</strong><br>
                                <table class="table table-condensed table-responsive table-user-information">
                                    <tbody>
                                        <tr>
                                            <td>User level:</td>
                                            <td>Moderator</td>
                                        </tr>
                                        <tr>
                                            <td>Registered since:</td>
                                            <td>11/12/2013</td>
                                        </tr>
                                        <tr>
                                            <td>Topics</td>
                                            <td>5</td>
                                        </tr>
                                        <tr>
                                            <td>Warnings</td>
                                            <td>0</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer">
                        <button class="btn btn-primary" type="button" data-toggle="tooltip" data-original-title="Send message to user"><i class="icon-envelope icon-white"></i></button>
                        <span class="pull-right">
                            <button class="btn btn-warning" type="button" data-toggle="tooltip" data-original-title="Edit this user"><i class="icon-edit icon-white"></i></button>
                            <button class="btn btn-danger" type="button" data-toggle="tooltip" data-original-title="Remove this user"><i class="icon-remove icon-white"></i></button>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row-fluid user-row">
            <div class="span1">
                <img class="img-circle" src="http://api.randomuser.me/portraits/women/45.jpg" alt="User Pic">
            </div>
            <div class="span10">
                <strong>MyUsername</strong><br>
                <span class="text-muted">User level: Registered user</span>
            </div>
            <div class="span1 dropdown-user" data-for=".myUsername">
                <i class="icon-chevron-down text-muted"></i>
            </div>
        </div>
        <div class="row-fluid user-infos myUsername">
            <div class="span10 offset1">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">User information</h3>
                    </div>
                    <div class="panel-body">
                        <div class="row-fluid">
                            <div class="span3">
                                <img class="img-circle" src="http://api.randomuser.me/portraits/women/45.jpg" alt="User Pic">
                            </div>
                            <div class="span6">
                                <strong>MyUsername</strong><br>
                                <table class="table table-condensed table-responsive table-user-information">
                                    <tbody>
                                    <tr>
                                        <td>User level:</td>
                                        <td>Registered user</td>
                                    </tr>
                                    <tr>
                                        <td>Registered since:</td>
                                        <td>11/12/2013</td>
                                    </tr>
                                    <tr>
                                        <td>Topics</td>
                                        <td>1</td>
                                    </tr>
                                    <tr>
                                        <td>Warnings</td>
                                        <td>1</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer">
                        <button class="btn btn-primary" type="button" data-toggle="tooltip" data-original-title="Send message to user"><i class="icon-envelope icon-white"></i></button>
                        <span class="pull-right">
                            <button class="btn btn-warning" type="button" data-toggle="tooltip" data-original-title="Edit this user"><i class="icon-edit icon-white"></i></button>
                            <button class="btn btn-danger" type="button" data-toggle="tooltip" data-original-title="Remove this user"><i class="icon-remove icon-white"></i></button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    //Reusing bootstrap 3 panel CSS
.panel {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}   

.panel-primary {
    border-color: #428BCA;
}   

.panel-primary > .panel-heading {
    background-color: #428BCA;
    border-color: #428BCA;
    color: #FFFFFF;
}   

.panel-heading {
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding: 10px 15px;
}   

.panel-title {
    font-size: 16px;
    margin-bottom: 0;
    margin-top: 0;
}   

.panel-body:before, .panel-body:after {
    content: " ";
    display: table;
}   

.panel-body:before, .panel-body:after {
    content: " ";
    display: table;
}   

.panel-body:after {
    clear: both;
}   

.panel-body {
    padding: 15px;
}   

.panel-footer {
    background-color: #F5F5F5;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top: 1px solid #DDDDDD;
    padding: 10px 15px;
}

//CSS from v3 snipp
.user-row {
    margin-bottom: 14px;
}

.user-row:last-child {
    margin-bottom: 0;
}

.dropdown-user {
    margin: 13px 0;
    padding: 5px;
    height: 100%;
}

.dropdown-user:hover {
    cursor: pointer;
}

.table-user-information > tbody > tr {
    border-top: 1px solid rgb(221, 221, 221);
}

.table-user-information > tbody > tr:first-child {
    border-top: 0;
}


.table-user-information > tbody > tr > td {
    border-top: 0;
}

    

	$(document).ready(function() {
    var panels = $('.user-infos');
    var panelsButton = $('.dropdown-user');
    panels.hide();

    //Click dropdown
    panelsButton.click(function() {
        //get data-for attribute
        var dataFor = $(this).attr('data-for');
        var idFor = $(dataFor);

        //current button
        var currentButton = $(this);
        idFor.slideToggle(400, function() {
            //Completed slidetoggle
            if(idFor.is(':visible'))
            {
                currentButton.html('<i class="icon-chevron-up text-muted"></i>');
            }
            else
            {
                currentButton.html('<i class="icon-chevron-down text-muted"></i>');
            }
        })
    });


    $('[data-toggle="tooltip"]').tooltip();

    $('button').click(function(e) {
        e.preventDefault();
        alert("This is a demo.\n :-)");
    });
});