Test bootstrap

by BeNdErR

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div id="tabcontainer">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#listcontainer" class="tab">Customers</a>

        </li>
        <li><a href="#detailcontainer" class="tab">Detail</a>

        </li>
    </ul>
</div>
<div class="tab-content">
    <!-- Customers List Page -->
    <div id="listcontainer" class="container tab-pane fade in active">
        <div class="list-group"></div>
    </div>
    <!-- Customer Details Page -->
    <div id="detailcontainer" class="container tab-pane fade">
        <div class="bg-info row">
            <div class="col-sm-3">
                <img class="img-responsive customerimg img-circle" src="http://www.afcb.co.uk/images/common/bg_player_profile_default_big.png" />
            </div>
            <div class="col-sm-9">
                 <h1 id="customername">aaa</h1>

            </div>
        </div>
    </div>
</div>

CSS

#tabcontainer {
    margin: 20px;
}
#listcontainer {
    margin: 0 20px;
}
#listcontainer {
}
.customerimg{
    max-height: 150px;
}

JavaScript

$(document).ready(function () {

    for (var x = 0; x < customersList.length; x++) {
        var a = $("<a href='#' class='list-group-item'></a>").data("customer", customersList[x]).append("<h4>" + customersList[x].name + "</h4>" +
            "<p>" + customersList[x].description + "</p>");
        $("#listcontainer div.list-group").append(a);
    }

    $("#tabcontainer").on("click", "a.tab", function (e) {
        e.preventDefault();
        $(this).tab("show");
    });

    $("#listcontainer").on("click", ".list-group-item", function () {
        $(this).addClass("active")
        $("#listcontainer .list-group-item").not(this).removeClass("active");
        var customerDetails = $(this).data("customer");
        showCustomerDetails(customerDetails);
    });

    function showCustomerDetails(cust) {

    };
});

var customersList = [{
    name: "Customer 1",
    description: "content customer 1",
    id: "1"
}, {
    name: "Customer 2",
    description: "content customer 2",
    id: "2"
}, {
    name: "Customer 3",
    description: "content customer 3",
    id: "3"
}, {
    name: "Customer 4",
    description: "content customer 4",
    id: "4"
}];

var customersDetails = {
    "1": {
        name: "Customer 1",
        address: "Customer 1 address",
        phone: "Customer 1 phone",
        email: "Customer 1 email",
        img: "http://www.afcb.co.uk/images/common/bg_player_profile_default_big.png"
    },
        "2": {
        name: "Customer 2",
        address: "Customer 2 address",
        phone: "Customer 2 phone",
        email: "Customer 2 email",
        img: "http://www.afcb.co.uk/images/common/bg_player_profile_default_big.png"
    },
        "3": {
        name: "Customer 3",
        address: "Customer 3 address",
        phone: "Customer 3 phone",
        email: "Customer 3 email",
        img: "http://www.afcb.co.uk/images/common/bg_player_profile_default_big.png"
    },
        "4": {
        name: "Customer 4",
        address: "Customer 4...