Home/ Questions/Q 6792131
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T17:55:52+00:00

I have the following HTML.. I’d like to hide the SIDEBAR div on load

  • 0

I have the following HTML.. I’d like to hide the SIDEBAR div on load and toggle it with the HREF separator or an image.. What is the most simple way to achieve this? Currently the page will show the sidebar div and i can toggle it with the link.. however I would like to change the link(or image) to (open/close) depending on state..

Found lots of ways to achieve this using slideup and slidedown.. just nothing from the side –

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.left {float: left;}
.right {float: right;}
.hidden {display: none;}

#sidebar {
    display: none;
}
#content {
    background-color: #EFE;
    border-color: #CDC;
    width: 97%;
}

.use-sidebar #sidebar {
    display: block;
    width: 20%;
}

.sidebar-at-left #sidebar {margin-right: 1%;}
.sidebar-at-left #content, .use-sidebar.sidebar-at-right #sidebar, .sidebar-at-right #separator {float: right;}

#separator {
    display: block;
    outline: none;
    width: 10%;
}

</style>
</head>

<body>
<div class="use-sidebar sidebar-at-right" id="main">
    <div id="sidebar">Some HTML Poll Content Here</script></div>
    <a href="" id="separator">SHOW POLL</a>
    <div class="clearer">&nbsp;</div>
</div>


<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // Variables
    var objMain = $('#main');
    // Show sidebar
    function showSidebar(){
        objMain.addClass('use-sidebar');
        objMain.addClass('sidebar-on');
    }
    // Hide sidebar
    function hideSidebar(){
    objMain.removeClass('use-sidebar');
    objMain.addClass('sidebar-off');
    }

    // Sidebar separator
    var objSeparator = $('#separator');
    objSeparator.click(function(e){
        e.preventDefault();
        if ( objMain.hasClass('use-sidebar') ){
            hideSidebar();
        }
        else {
            showSidebar();
        }
    }).css('height', objSeparator.parent().outerHeight() + 'px');
});
</script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The .slide() effects are just short hand notations for .animate().

    You can just create your own: http://jsfiddle.net/rkw79/2dgg8/2/

    Set the ‘left’ property outside of view range and then put it into view on click.

    $('input').toggle(function() {
    $('div').animate({
        left: '0px'
    });
    $(this).val('close');
}, function() {
    $('div').animate({
        left: '-150px'
    });
    $(this).val('open');
});
    • 0