Simple jQuery to extend page body if Quick Launch has been toggled SP2010

Question

Beginner. I have a link that expands a single page onclick with the following jQuery:

<script type="text/javascript">

    var $j = jQuery.noConflict();
    function toggleQuickLaunch() {
        $j('#s4-leftpanel').toggle(500);
        $j('.s4-title').toggle(500);
        $j('.s4-toplinks').toggle(500);
        $j('body #s4-topheader2').toggle(500);
      }
      </script>

this works fine, but what I need to learn is how to expand the page to margin 0px if the quick lauch has been toggled hidden, and set back to default if it has been toggled back. Is this possible, and if so what do I need to add to my script to make it happen.

thanks as always guys!

Answer 1

You have most of the code there - you also need to remove the margin on the #ct100_MSO_ContentDiv. You can either go after the class or the ID on this one. My example sets margin 0px; on the ID.

Why? The left nav is a div, and the MSO_ContentDiv floats to the left of that. To have both behave correctly, Microsoft added margin to the MSO_ContentDiv.

In my solution, I'm using a custom class so it can be toggled along with the rest of your code.

<script type="text/javascript">
    var $j = jQuery.noConflict();
    function toggleQuickLaunch() {
        $j('#s4-leftpanel').toggle(500);
        $j('.s4-title').toggle(500);
        $j('.s4-toplinks').toggle(500);
        $j('body #s4-topheader2').toggle(500);
        $j('#ctl00_MSO_ContentDiv').toggleClass('myCustomClass');
      }
</script>

And the CSS block (this can also live in your custom CSS).

<style type="text/css">
.myCustomClass {
    margin: 0px !important;
}

Hope this helps!