Increasing right column width on hiding left column with JQuery (Vice Versa)

Question

I have looked at:
The resizable control,
and this forum link,
all without finding the proper resolution.

I have a page (without a master page) that has 2 columns. Once column houses a menu structure, and the other a PDF viewer.

I want to be able to hide the menu, and expand the PDFviewer to the full page.
Unfortunately, I currently only have the Hide() option working.

Here is some code:

Style Sheet.css

body {
}

.wrapper {
    margin: 0 auto;
}

.left {
    width: 25%;
    float: left;
    background: #f4f4f4;
    overflow: hidden;
}

.right {
    width: 75%;
    float: right;
    margin-top: -20px;
    padding-top: -20px;
}

Default.aspx

<div class="wrapper">
                    <div runat="server" id="left" class="left">
                        <div style="padding-top: 10px">
                            <asp:Label runat="server" Text="File List" Font-Size="20px" Font-Bold="True"></asp:Label>
                            - <a id="uploadLink" href="Upload.aspx">Upload</a>
                            <br />
                            <br />
                            <!-- Menu structure -->
                        </div>

                    </div>
                    <div class="right" id="right">
                    <a id="showh1">+</a>
                    <a id="hideh1">-</a>
                        <div style="border: 1px solid grey;">
                            <iframe runat="server" id="pdfHolder" width="100%" seamless="seamless" title="Doc"></iframe>
                        </div>
                    </div>
                    <asp:Label runat="server" ID="lbltest" Text=" ---- " Visible="False"></asp:Label>
</div>

Javascript snippet on Default.aspx

    <script type="text/javascript">
        $(document).ready(function () {
            $('#hideh1').click(function () {
                $('div.left').hide("Drop");
            });
            $('#showh1').click(function () {
                $('div.left').show("Drop");
            });
        });
    </script>

How can I correctly do this?

Answer 1

Try this:

<script type="text/javascript">
    $(document).ready(function () {
        $('#hideh1').click(function () {
            $('div.left').hide("Drop");
            $('div.right').css("width", "100%");
        });
        $('#showh1').click(function () {
            $('div.left').show("Drop");
            $('div.right').css("width", "75%");
        });
    });
</script>