toggle radio of query- probleem?
Ik heb een toggle script en het lukt niet om die aan de praat te krijgen. Ik heb een link naar jquery en zie vaak de opmerking "jquery". Hoor graag of dit hier ook zo kan zijn en wat ik dan verder moet. Dank alvast!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Naamloos document</title>
<style type="text/css" media="screen">
.Div {
display: none;
}
</style>
<script src="scripts/jQuery.js" type="text/javascript">
$(document).ready(function(){
$('.Div').hide();
$('input[name="Radio"]').click(function(){
var selected = $(this).val();
$('.Div').slideUp();
$('#'+selected).slideDown();
});
});
</script>
</head>
<body>
<form action="voorbeeld.com" method="post">
<input type="radio" name="Radio" value="Div_1" />appels<br />
<input type="radio" name="Radio" value="Div_2" />kaas<br />
<input type="radio" name="Radio" value="Div_3" />eieren<br />
<input type="radio" name="Radio" value="Div_4" />brood
</form>
<div id="Div_1" class="Div">Div number 1!</div>
<div id="Div_2" class="Div">Div number 2!</div>
<div id="Div_3" class="Div">Div number 3!</div>
<div id="Div_4" class="Div">Div number 4!</div>
</body>
</html>
Toevoeging op 21/05/2012 01:06:07:
Ik heb zelf nog wat geprobeerd, maar dat leidt er niet toe dat de bijbehorende tekst in de div verschijnt als een keuze (radio) wordt gemaakt. Dit is wat ik nu heb.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Naamloos document</title>
<style type="text/css" media="screen">
.Div {
display: none;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".Div").hide();
$('input[name="Radio"]').click(function(){
var selected = $(this).val();
$(".Div").slideUp();
$("#"+selected).slideDown();
});
});
</script>
</head>
<body>
<form action="" method="post">
<input type="radio" name="Radio" value="Div_1" />appels<br />
<input type="radio" name="Radio" value="Div_2" />kaas<br />
<input type="radio" name="Radio" value="Div_3" />eieren<br />
<input type="radio" name="Radio" value="Div_4" />brood
</form>
<div id="Div_1" class="Div">Div 1</div>
<div id="Div_2" class="Div">Div 2</div>
<div id="Div_3" class="Div">Div 3</div>
<div id="Div_4" class="Div">Div 4</div>
</body>
</html>
De verkeerde link was gebruikt. Dit is de goede:
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
Succes ermee.