Web page archived as of 2018-05-22. Some links & features might not work.

Vertical, sliding panel with auto-hide & pin

Last year, I was playing around with a vertical, sliding panel that appears and disappears automatically depending on the mouse pointer1). Sebastian Bohnen asked me whether it was possible to add a pin to the panel that would stop the auto-hide when pinned.

I replied with a rough sketch that I thought must have been quite incomprehensible but it didn't stop him from adding this feature. Here's the bare bones:

Of course, we need a pin. A picture of a pin would be nice but to keep it simple let's just use an empty <div> for now:

<div id="rightPanelPin"> </div>

Then we need to register a Javascript function to be triggered when the "pin" is clicked. So, we add


to the $(document).ready(function()).

The actual function rightPanelPin() toggles a variable and the content of the "pin" (should show a pinned pin or something when clicked).

var rightpanelpinned = false;
function rightPanelPin() {
    if (rightpanelpinned) {
        rightpanelpinned = false;
        $('#rightPanelPin').html(' ');
    } else {
        rightpanelpinned = true;

That's it. Now we can add && !rightpanelpinned to the collapsePanel() function to stop the auto-hide if the panel is pinned.

function collapsePanel() {
    if (rightpanel && !rightpanelpinned) {


I have updated the jsfiddle demo to include the pin feature

Sebastian currently has the panel with a pin live at

  • http://e-ducation.net/technicalscience/ (went off-line in 2014!?)

As of now, to show it: Click on 'Open', and 'toggle layout'. Then the vertical panel is on the left side.

Further reading

blog/120712_vertical_sliding_panel_with_pin.txt · Last modified: 2014-03-05 22:07 by andreas