asked on

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!

Julian Hansen

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

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

VBBRett

ASKER

This works great, but do you have one that moves up and down also? thanks!

Julian Hansen

If you want it to move up and down you can look at the .slideUp and .slideDown functions.

Will post code a little later.