Question

Could someone please tell me how to make an ajax hide/show toggle script also alternate between showing the contents of another element block. For example I have this iframe (that is hidden on the page):

<iframe class="slidingframe" id="thisframe" name="search" src="content.html"></iframe>

And the hide/show state of that iframe is controlled by this form button:

<form accept-charset="UTF-8" class="fsearch" action="./Affiliates/search_db/search.php" method="get" target="search">
<input type="submit" value="Search" class="send-button" />
<input type="hidden" name="search" value="1" />
<label for="sitesearch">
<input id="sitesearch" class="tfield" type="text" name="query" size="30" />
</label>
</form>

Now what I want is when I click the button it should show the iframe I specified while also hiding this one:

<div id="my_div">some content here</div>

And also once I click outside of the area of the first iframe or anything outside of it I would like for it to go back to being hidden and leaving only the second div I specified (myDiv) which is very important because all of the contents is loaded into this div. While the form button when clicked fires a site search and load the data in the iframe.

Answer 1

You can do it like this

Live Demo

$(document).ready(function() {    
    $('.show_hide').click(function() {
        if ($('#div_one').is(':visible')) {
            $('#div_one').hide(2000);
            $('#div_two').show(2000);
        }
        else {
            $('#div_one').show(2000);
            $('#div_two').hide(2000);
        }    
    });
});​