--- a/browser_side/panels.py	Mon Nov 11 12:48:33 2013 +0100
+++ b/browser_side/panels.py	Sun Nov 17 17:41:54 2013 +0100
@@ -24,7 +24,6 @@
 from pyjamas.ui.AbsolutePanel import AbsolutePanel
 from pyjamas.ui.VerticalPanel import VerticalPanel
 from pyjamas.ui.HorizontalPanel import HorizontalPanel
-from pyjamas.ui.DialogBox import DialogBox
 from pyjamas.ui.HTMLPanel import HTMLPanel
 from pyjamas.ui.Frame import Frame
 from pyjamas.ui.TextArea import TextArea
@@ -33,6 +32,7 @@
 from pyjamas.ui.HTML import HTML
 from pyjamas.ui.Image import Image
 from pyjamas.ui.PopupPanel import PopupPanel
+from pyjamas.ui.StackPanel import StackPanel
 from pyjamas.ui.ClickListener import ClickHandler
 from pyjamas.ui.KeyboardListener import KEY_ENTER, KEY_UP, KEY_DOWN
 from pyjamas.ui.Event import BUTTON_LEFT, BUTTON_MIDDLE, BUTTON_RIGHT
@@ -1056,3 +1056,32 @@
 
     def registerRightClickSender(self, sender):
         self.registerClickSender(sender, BUTTON_RIGHT)
+
+
+class ToggleStackPanel(StackPanel):
+    """This is a pyjamas.ui.StackPanel with modified behavior. All sub-panels ca be
+    visible at the same time, clicking a sub-panel header will not display it and hide
+    the others but only toggle its own visibility. The argument 'visibleStack' is ignored.
+    Note that the argument 'visible' has been added to listener's 'onStackChanged' method.
+    """
+
+    def __init__(self, **kwargs):
+        StackPanel.__init__(self, **kwargs)
+
+    def onBrowserEvent(self, event):
+        if DOM.eventGetType(event) == "click":
+            index = self.getDividerIndex(DOM.eventGetTarget(event))
+            if index != -1:
+                self.toggleStack(index)
+
+    def add(self, widget, stackText="", asHTML=False, visible=False):
+        StackPanel.add(self, widget, stackText, asHTML)
+        self.setStackVisible(self.getWidgetCount() - 1, visible)
+
+    def toggleStack(self, index):
+        if index >= self.getWidgetCount():
+            return
+        visible = not self.getWidget(index).getVisible()
+        self.setStackVisible(index, visible)
+        for listener in self.stackListeners:
+            listener.onStackChanged(self, index, visible)

--- a/public/libervia.css	Mon Nov 11 12:48:33 2013 +0100
+++ b/public/libervia.css	Sun Nov 17 17:41:54 2013 +0100
@@ -1297,4 +1297,52 @@
 .contactGroupButtonCell {
 	vertical-align: baseline;
 	width: 55px;
+
+/* StackPanel */
+
+.gwt-StackPanel {
+}
+
+.gwt-StackPanel .gwt-StackPanelItem {
+    background-color: #222;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’444444′, endColorstr=’#222222’);
+    background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#222222));
+    background: -moz-linear-gradient(top, #444444, #222222);
+    background-image: -o-linear-gradient(#444444,#222222);
+    text-decoration: none;    
+    font-weight: bold;
+    height: 100%;
+    color: #e7e5e5;
+    padding: 3px 15px;
+    /*display: block;*/
+    border-radius: 1em 1em 1em 1em;
+    -webkit-border-radius: 1em 1em 1em 1em;
+    -moz-border-radius: 1em 1em 1em 1em;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+    -webkit-transition: color 0.2s linear; 
+    -moz-transition: color 0.2s linear; 
+    -o-transition: color 0.2s linear;
+}
+
+.gwt-StackPanel .gwt-StackPanelItem:hover {
+    background-color: #eee;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eee’, endColorstr=’#aaa′);
+    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
+    background: -moz-linear-gradient(top, #eee, #aaa);
+    background-image: -o-linear-gradient(#eee,#aaa);
+    color: #444;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);    
+    cursor: pointer;
+}
+
+.gwt-StackPanel .gwt-StackPanelItem-selected {
+    background-color: #eee;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eee’, endColorstr=’#aaa′);
+    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
+    background: -moz-linear-gradient(top, #eee, #aaa);
+    background-image: -o-linear-gradient(#eee,#aaa);
+    color: #444;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);    
+    cursor: pointer;
+}
 }
\ No newline at end of file