diff --git a/css/style.css b/css/style.css
index 0b64efc..4a5fd83 100644
--- a/css/style.css
+++ b/css/style.css
@@ -137,6 +137,14 @@ footer {
     font-size: x-small;
 }
 
+/* transit demo */
+#itinerary pre {
+    font-size: small;
+    /* turn off bootstrap 'break-word' */
+    word-wrap: normal;
+    margin: 0;
+}
+
 /* dashed line animation, derived from Chris Coyier and others
 https://css-tricks.com/svg-line-animation-works/
 */
@@ -297,7 +305,8 @@ table.dataTable.display tbody tr.even:hover {
  */
 
 .leaflet-sidebar-pane#tab_profile,
-.leaflet-sidebar-pane#tab_data {
+.leaflet-sidebar-pane#tab_data,
+.leaflet-sidebar-pane#tab_itinerary {
     /* Full height for content with inner scrolling, 
        overrides scroll fix for long content in Firefox */
     height: 100%;
diff --git a/index.html b/index.html
index 023205e..687ee86 100644
--- a/index.html
+++ b/index.html
@@ -211,7 +211,7 @@
 
                     <div class="leaflet-sidebar-pane" id="tab_itinerary">
                         <h1 class="leaflet-sidebar-header">Itinerary<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
-                        <div id="itinerary">
+                        <div id="itinerary" class="flexcolumn flexgrow">
                         </div>
                     </div>
 
diff --git a/js/control/Itinerary.js b/js/control/Itinerary.js
index 4211277..8b1db3c 100644
--- a/js/control/Itinerary.js
+++ b/js/control/Itinerary.js
@@ -1,18 +1,14 @@
 BR.Itinerary = L.Class.extend({
-	  options: {
-        heading: 'Itinerary'
-    },
 
-    onAdd: function (map) {
+    initialize: function () {
         this._content = document.getElementById('itinerary');
-        document.getElementById('tab_itinerary').hidden = false;
         this.update();
     },
 
     update: function (polyline, segments) {
         var i, j, iter, html = '';
 
-        html += '<pre>';
+        html += '<pre class="flexgrow">';
         for (i = 0; segments && i < segments.length; i++)
         {
             iter = segments[i].feature.iternity;
diff --git a/js/index.js b/js/index.js
index ebc4a77..4bff516 100644
--- a/js/index.js
+++ b/js/index.js
@@ -220,11 +220,15 @@
         trackMessages.onAdd(map);
 
         sidebar = BR.sidebar({
+            defaultTabId: BR.conf.transit ? 'tab_itinerary' : 'tab_profile',
             listeningTabs: {
                 'tab_profile': profile,
                 'tab_data': trackMessages
             }
         }).addTo(map);
+        if (BR.conf.transit) {
+            sidebar.showPanel('tab_itinerary');
+        }
 
         nogos.addTo(map);
         nogos.preventRoutePointOnCreate(routing);
diff --git a/js/plugin/Sidebar.js b/js/plugin/Sidebar.js
index 257f359..72bf64c 100644
--- a/js/plugin/Sidebar.js
+++ b/js/plugin/Sidebar.js
@@ -6,6 +6,7 @@ BR.Sidebar = L.Control.Sidebar.extend({
         container: 'sidebar', 
         tabContainer: 'sidebarTabs',
         autopan: false,
+        defaultTabId: '',
 
         // Tabs to be notified when shown or hidden
         // (tab div id -> object implementing show/hide methods)
@@ -33,7 +34,14 @@ BR.Sidebar = L.Control.Sidebar.extend({
 
         return this;
     },
-    
+
+    showPanel: function(id) {
+        var tab = this._getTab(id);
+        tab.hidden = false;
+
+        return this;
+    },
+
     _rememberTabState: function () {
         if (BR.Util.localStorageAvailable()) {
             this.on('content closing', this._storeActiveTab, this);
@@ -43,7 +51,7 @@ BR.Sidebar = L.Control.Sidebar.extend({
             // not set: open sidebar by default for new users
             // 'true': legacy value for toggling old sidebar
             if (tabId === null || tabId === 'true') {
-                tabId = 'tab_profile';
+                tabId = this.options.defaultTabId;
             }
             if (tabId !== '') {
                 this.open(tabId);