Плавное появление и исчезновение двух блоков при выборе одного из них

[ignernom]

Уважаемые знатоки,
наглядный пример тут http://fsd564.bget.ru/example2/index.html

Необходимо сделать, что бы при выборе варианта "Выбор 1" плавно раскрывался "БЛОК 1",
но при выборе варианта "Выбор 2" плавно раскрывался "БЛОК 2", а "БЛОК 1" при этом закрывался.
И обратно - при выборе варианта "Выбор 1" закрывался "БЛОК 2" и раскрывался "БЛОК 1"

<script src="jquery.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){
    $('#show').click(function(){
        $('#layer').show('slow');
    });
    $('#show2').click(function(){
        $('#layer2').show('slow');
    });
});
</script>
 
<input type="radio" name="type" value="1" id="show">Выбор 1
<input type="radio" name="type" value="2" id="show2">Выбор 2<br>
<div ID="layer" style="display:none;">БЛОК 1</div>
<div ID="layer2" style="display:none;">БЛОК 2</div>

Дополнение: если можно, то желательно что бы изначально при открытии страницы уже стоял указатель на Выборе 1 с раскрытым "БЛОК 1"

[animhotep]

добавьте .hide(); в функции клика

[ignernom]

animhotep
нельзя ли поподробнее,
в javascript не разбираюсь совсем

[animhotep]

<script src="jquery.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){
    $('#show').click(function(){
        $('#layer2').hide();
        $('#layer').show('slow');
    });
    $('#show2').click(function(){
        $('#layer').hide();
        $('#layer2').show('slow');
    });
});
</script>
 
<input type="radio" name="type" value="1" id="show">Выбор 1
<input type="radio" name="type" value="2" id="show2">Выбор 2<br>
<div ID="layer" style="display:none;">БЛОК 1</div>
<div ID="layer2" style="display:none;">БЛОК 2</div>

[ignernom]

animhotep премного благодарен за помощь

[ignernom]

animhotep
Появилась проблема, при изменении типа выбора вариантов с "radio" на "select" второй код отказывается работать в Хроме (при этом он работает в Опере и Мозиле)

первый вариант http://fsd564.bget.ru/example2/index.html - работает везде

вот второй вариант http://fsd564.bget.ru/example2/index2.html - не хочет работать в Хроме.

<script src="jquery.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){
    $('#show').click(function(){
        $('#layer2').hide();
		 $('#layer3').hide();
        $('#layer').show('slow');
    });
    $('#show2').click(function(){
        $('#layer').hide();
		$('#layer3').hide();
        $('#layer2').show('slow');
    });
	$('#show3').click(function(){
        $('#layer').hide();
		$('#layer2').hide();
        $('#layer3').show('slow');
    });
});
</script>
 
 <select name="email_known" style="width:150px" >
     <option selected="selected" value="Не выбрано" id="choice"> Выберите </option>
     <option value="1" id="show">Выбор 1</option>      
     <option value="2" id="show2">Выбор 2</option>
     <option value="3" id="show3">Выбор 3</option>	 
    </select><br>
<div ID="layer" style="display:none;">БЛОК 1</div>
<div ID="layer2" style="display:none;">БЛОК 2</div>
<div ID="layer3" style="display:none;">БЛОК 3</div>

Думаю проблема в click(function() , наверно ее нужно заменить на функцию аналогичную select, но как это сделать я не представляю

[animhotep]

подход нужен другой. у селекта есть событие при изменении

$("select").change(function () {
 alert ( $(this).val() ); //здесь будет значение выбранного пункта 1,2,3
});

[ignernom]

animhotep спасибо еще раз, разобрался