panelBar

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.web.min.js"></script>
<!--<div id="example" class="k-content">-->
    <div id="organizer">
        <ul id="panelbar">
            <li class="k-state-active">Projects
                <ul>
                    <li>Programs</li>
                    <li>Communication</li>
                </ul>
            </li>
            <li class="pBar">Projects 2
                <ul>
                    <li>Programs 2</li>
                    <li>Communication 2</li>
                </ul>
            </li>
        </ul>
    </div>

CSS

#organizer {
                   width: 300px;
                   margin: 0 auto;
                   padding: 47px 0 0 0;
               }
               #bottom {
                   width: 300px;
                   height: 90px;
               }
               .teamMate:after {
                   content:".";
                   display: inline-block;
                   height: 0;
                   line-height: 0;
                   clear: both;
                   visibility: hidden;
               }
               .teamMate h2 {
                   font-size: 1.4em;
                   font-weight: normal;
                   padding-top: 20px;
               }
               .teamMate p {
                   margin: 5px 0;
               }
               .teamMate img {
                   float: left;
                   margin: 5px 15px 5px 5px;
                   border: 1px solid #ccc;
               }
               .pBar {
                   display: inline-block;
                   list-style: none;
               }

JavaScript

$(document).ready(function () {
                    $("#panelbar").kendoPanelBar({
                        expandMode: "single"
                    });
                });