<button id="toggle-drawer" type="button">Toggle Drawer</button>
  <div id="drawer">
    <div class="drawer-content">
      <h2>Active account</h2>
      <p id="selected-account">Select an account from the Drawer.</p>
    </div>
  </div>

  <script>
    $(function () {
      var drawer = $("#drawer").kendoDrawer({
        mode: "push",
        width: 280,
        expanded: true,
        items: [
          {
            text: "Ada Lovelace",
            email: "ada@example.com",
            initials: "AL",
            role: "Administrator",
            selected: true,
            template: accountTemplate
          },
          {
            text: "Grace Hopper",
            email: "grace@example.com",
            initials: "GH",
            role: "Developer",
            template: accountTemplate
          },
          {
            text: "Katherine Johnson",
            email: "katherine@example.com",
            initials: "KJ",
            role: "Analyst",
            template: accountTemplate
          }
        ],
        itemClick: function (e) {
          $("#selected-account").text("Selected: " + e.dataItem.text + " (" + e.dataItem.role + ")");
        }
      }).data("kendoDrawer");

      $("#toggle-drawer").on("click", function () {
        if (drawer.expanded) {
          drawer.hide();
        } else {
          drawer.show();
        }
      });

      function accountTemplate(item) {
        return "<li data-role='drawer-item' class='account-item'>" +
          "<span class='account-avatar' aria-hidden='true'>" + kendo.htmlEncode(item.initials) + "</span>" +
          "<span class='account-details'>" +
          "<span class='account-name'>" + kendo.htmlEncode(item.text) + "</span>" +
          "<span class='account-email'>" + kendo.htmlEncode(item.email) + "</span>" +
          "</span>" +
          "</li>";
      }
    });
  </script>