diff --git a/Pivot.skin.php b/Pivot.skin.php
index 0b5c694..543bee3 100644
--- a/Pivot.skin.php
+++ b/Pivot.skin.php
@@ -300,10 +300,14 @@ class pivotTemplate extends BaseTemplate {
 	function renderSidebar() { 
 		$sidebar = $this->getSidebar();
 		foreach ($sidebar as $boxName => $box) { 
-			echo '<li><label class="sidebar" id="'.Sanitizer::escapeId( $box['id'] ).'"';echo Linker::tooltip( $box['id'] ).'>'.htmlspecialchars( $box['header'] ).'</label></li>';
+			echo '<ul class="portal" role="navigation">';
+			echo '<li><label class="sidebar active" id="'.Sanitizer::escapeId( $box['id'] ).'"';echo Linker::tooltip( $box['id'] ).'>'.htmlspecialchars( $box['header'] ).'</label>';
 					if ( is_array( $box['content'] ) ) {
+							echo '<ul class="portal-content">';
 							foreach ($box['content'] as $key => $item) { echo $this->makeListItem($key, $item); }
-								} 
+							echo '</ul>';
+								}
+			echo '</li></ul>';
 							}
 		return;	}	
 }
diff --git a/assets/scripts/pivot.js b/assets/scripts/pivot.js
index 623cc8b..0a0a039 100644
--- a/assets/scripts/pivot.js
+++ b/assets/scripts/pivot.js
@@ -11,4 +11,10 @@ jQuery(document).ready(function() {
   jQuery("#pt-notifications-alert").prependTo("#echo-notifications-alerts");
   jQuery("#pt-notifications-notice").prependTo("#echo-notifications-notice");
   
+
+});
+
+  jQuery('.portal > li label').click(function() {
+    $(this).parent().find('ul').toggle();
+	$( this ).toggleClass( "active" );
 });
\ No newline at end of file
diff --git a/assets/stylesheets/pivot.css b/assets/stylesheets/pivot.css
index 3e347fe..4a1c3aa 100644
--- a/assets/stylesheets/pivot.css
+++ b/assets/stylesheets/pivot.css
@@ -740,7 +740,14 @@ margin: 0;
 	border-left: 1px solid #ccc;		
     border-right: 1px solid #ccc;
 }
-
+ul.portal,
+ul.portal-content {
+    margin: 0;
+    list-style: none;
+}
+ul.portal-content {
+	margin: .75em 0;
+}
 ul.side-nav .button {
     margin: 0;
 }
@@ -785,6 +792,24 @@ ul.side-nav label {
     color: #fff;
     padding: .25em .5em;
 }
+#sidebar label.sidebar.active:after {
+    font: normal normal normal 14px/1 FontAwesome;
+    line-height:2em;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    content: '\f068'; /* Unicode character for "plus" sign (+) */
+    color: #fff;
+    float: right;
+}
+#sidebar label.sidebar:after {
+    font: normal normal normal 14px/1 FontAwesome;
+    line-height:2em;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    content: '\f067'; /* Unicode character for "plus" sign (+) */
+    color: #fff;
+    float: right;
+}
 body {
 	background-color: #DCEAEA;
 }
diff --git a/skin.json b/skin.json
index a55dd2d..665f1e0 100644
--- a/skin.json
+++ b/skin.json
@@ -6,7 +6,7 @@
 		"..."
 	],
 	"license-name": "BSD-2-Clause",
-	"url": "http://github.com/hutchy68/pivot",
+	"url": "https://github.com/hutchy68/pivot",
 	"descriptionmsg": "pivot-desc",
 	"type": "skin",
 	"ValidSkinNames": {