How to choose between two divs using jquery

I would like to have two divs to choose from.  If a radio button choice is the first option, I want one div to be opened, if the other option is chosen, I would like to slowly open the other div as the first div is hidden.  How could this be done in Jquery and asp.net?  Thanks!
VBBRettAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Do you mean something like this
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
    $('input:radio[name="showmehideme"]').change(function(){
        var el = $(this);
        $('.showmehideme').animate({width: 0}, 500, function() {
            $(this).hide();
            $('#' + el.val()).show().animate({width: '330px'}, 500);
        });
    });
});
</script>
<style type="text/css">
.showmehideme {
    width: 330px;
    border: 1px solid #444;
    padding: 10px;
    height: 380px;
    display: inline-block;
}
</style>
</head>
<body>
    <div class="showmehideme" id="showmehideme_1">
        This is the visible div
    </div>
    <div class="showmehideme" style="width: 0; display: none;" id="showmehideme_2">
        This is the other div but will only be visible when the radio button is changed
    </div>
    <input type="radio" name="showmehideme" value="showmehideme_1" checked="checked"/> Div 1 <input type="radio" name="showmehideme" value="showmehideme_2"/> Div 2
</body>
</html>

Open in new window

0
Julian HansenCommented:
Here is another version - this slides a bit more elegantly. The widths that are 352 and 704 are like that to take the borders into account
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
    $('input:radio[name="showmehideme"]').change(function(){
        var left = -$('#window').width() - $('#container').position().left + 'px';
        $('#container').animate({left: left}, 500);
    });
});
</script>
<style type="text/css">
#window {
    overflow: hidden;
    width: 352px;
    height: 402px;
    position: relative;
}
#container {
    width: 704px;
    height: 402px;
    position: absolute;
    left: 0;
    top: 0;
}
.showmehideme {
    width: 330px;
    border: 1px solid #444;
    padding: 10px;
    height: 380px;
    float: left;
    
}
</style>
</head>
<body>
<div id="window">
<div id="container">
    <div class="showmehideme" id="showmehideme_1">
        This is the visible div
    </div>
    <div class="showmehideme" id="showmehideme_2">
        This is the other div but will only be visible when the radio button is changed
    </div>
</div>
</div>
<input type="radio" name="showmehideme" value="showmehideme_1" checked="checked"/> Div 1 <input type="radio" name="showmehideme" value="showmehideme_2"/> Div 2
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
VBBRettAuthor Commented:
This works great, but do you have one that moves up and down also?  thanks!
0
Julian HansenCommented:
If you want it to move up and down you can look at the .slideUp and .slideDown functions.

Will post code a little later.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.