Question

i am having a div containing the menu aligned lef and an iframe which aligned right, also a button which slideToggle to show/hide the div, what i wanna do is to make the iframe resize it self automatically when the div disappears to take the whole width of the page, and give space to the div when it appears, how i can achieve that?

<script>
        $(document).ready(function(){
$(".flip").click(function(){
    $(".mmenu").slideToggle("slow");
  });
});
</script>
 <button class="flip">Show.Hide menu</button>
                     <div id="nav" class="mmenu" style="float: left; border-radius: 10px; position: fixed;
                             bottom: 75px;border: 5px solid #003366; bottom: 50px;">
                            <ul type="none">
                                <li><a target="collabsoft" href= "ProfilePage.php?property_variable=mine">My Profile</a></li>
                                        <li><a target="collabsoft" href= "viewMessages.php">Messages</a></li>
                                        <li><a target="collabsoft" href= "userHomepage.php">My Conferences</a></li>

                                    </ul>
                                </div>
                                <iframe scrolling="no" id="collabsoft" name="collabsoft" src="latestNews.php" style="position: relative;
                             width: 950px; height: 100%;></iframe>

Answer 1

Basically the same solution as @Pakauji Pakau, but for a slightly simpler case: http://jsfiddle.net/RichardTowers/x6djM/1/.

Since there’s different stuff going on on show and hide, I’d use show() and hide() explicitly rather than slideToggle().