Question

I am setting up a page which the user can hide the side bar if they wish. I am trying to use the jqeuryui to do this with the following js code

// TOGGLE JS
$(function () {      
    function runEffect() {           
        var options = {};            
        $("#effect").toggle('slide', options, 500);
    };
    $("#button").click(function () {
        runEffect();
        return false;
    });
}); 

I have this working in a JSFiddle here http://jsfiddle.net/jwg4U/

However, when you look at the JSFiddle you will notice that my main content area which is a DIV called #content does not animate, it just jumps into place when I toggle the sidebar.

I would like the content div to also slide into place seamlessly and follow the toggle as it if it attached to it.

I have looked at jquery animate, but not sure how to implement this with the slide?

---

A Second part I am struggling with is how to change the button text when the sidebar is closed to say “Show Sidebar” – Weather it is open or closed right now it just says “Hide Sidebar”

Looking for some help

Thanks

Answer 1

See this updated fiddle : http://jsfiddle.net/jwg4U/23/

HTML:

<div id="container" style="width:800px">

<div id="header">
     <h1>HEADER</h1>
</div>

<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
    <div id="menu" style="background-color:#FFD700;height:300px;width:100px;float:left;">
        <h3>SIDEBAR</h3>
    </div>
</div>


<div id="content" style="background-color:#EEEEEE;height:300px;">Main Content goes     here</div>
</div>
<a href="#" id="button" class="ui-state-default ui-corner-all">Hide Sidebar</a>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
FOOTER</div>

</div>

​

JS:

// TOGGLE JS
$(function() {
var i = 0;

function runEffect() {
    var options = {};
    if (i === 0) {
        i = 1;
        $(".toggler").animate({
            left: -100
        }, {
            duration: 500
        });
    }
    else {
        i = 0;
        $(".toggler").animate({
            left: 0
        }, {
            duration: 500
        });
    }
}
$("#button").click(function() {
    if (i === 0) {
        $(this).html("Show Sidebar");
    }
    else {
        $(this).html("Hide Sidebar");
    }
    runEffect();
    return false;
});
});

// TABS JS
$(function() {
$("#tabs").tabs();
});​

CSS:

 .toggler {
    float: left;
    position: relative;
}
#button {
    padding: .5em 1em;
    text-decoration: none;
}
#effect {
    position: relative;
    float: left;
}
#content{
    position: relative;
    float: left;
    width: 500px;
}
#button{
    float: left;
    clear: both;
}
#header{
    background-color: #000;
    color: #FFF;
}​