Log In

Email:
Password:
Keep me logged in

Forgot Password

Email:




Social Media
     
CategoriesCSS (5)
jQuery (73)
PHP (30)
.htaccess (4)
Sponsored Links


Show Content w/ Input Radio
CSS Javascript jQuery
Demo | Browse Category | Thursday, December 1, 2011 by




Code:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$("input[name=selection]").click(function(){
var id = $(this).attr("id"); //GETS THE "id" OF IMPUT
var id = id.substr(1); //SUBSTRACTS THE 1ST CHARACTER TO MATCH ITS MESSAGE ID
//Ex: input#i1 & span#s1, GETS "1" FOR COMPARISON

$(".content").hide(); //HIDE ALL CONTENT EXCEPT FOR THE SELECTED INPUT
$("#s"+id).show(); //SHOWS THE CONTENT MATCHING THE SELECTED INPUT
});
});
</script>
<style>
.content {
display: none; !important /*ALL CONTENT HIDDEN UNTIL A RADIO IS SELECTED*/
}
</style>
</head>
<body>
<input id="i1" name="selection" type="radio" value="1">
<input id="i2" name="selection" type="radio" value="1"><br>
<span class="content" id="s1">one</span>
<span class="content" id="s2">two</span>
</body>
</html>
Views: 300 Likes: 0 Dislikes: 0