I have one HTML page with one toggle button and some drop down item. My toggle button is like on-off.
What i need?? I need to hide drop down item when i click on “ON” and show drop-down when i click
on “off”. I am very newbie on HTML , CSS, JQuery. Here is my code of HTML file which work only
for toggle.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"
type="text/javascript"></script>
<script src="jquery/iphone-style-checkboxes.js" type="text/javascript"
charset="utf-8"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"
charset="utf-8" />
<style type="text/css">
body {padding: 10px; }
th {text-align: right;padding: 4px;padding-right: 15px;vertical-align: top; }
.css_sized_container .iPhoneCheckContainer {width: 250px; }
</style>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.on_off :checkbox').iphoneStyle();
$('.disabled :checkbox').iphoneStyle();
$('.css_sized_container :checkbox').iphoneStyle({
resizeContainer: false, resizeHandle: false
});
$('.long_tiny :checkbox').iphoneStyle({
checkedLabel: 'Very Long Text', uncheckedLabel: 'Tiny'
});
var onchange_checkbox = ($('.onchange :checkbox')).iphoneStyle({
onChange: function(elem, value) {
$('span#status').html(value.toString());
}
});
setInterval(function() {
onchange_checkbox.prop(
'checked', !onchange_checkbox.is(':checked')).iphoneStyle("refresh");
return
}, 2500);
});
</script>
</head>
<body>
<table><tr class="on_off">
<td>
<input type="checkbox" id="on_off" />
</td>
</tr></table>
</body>
</html>
I know following function use for hide and show.
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
But i don’t understand how this function implement in javascript.
because above function work on two button and i use only one button..
Please give me any hint or direct me where i wrong?….
You can use
togglemethod:Or according to your markup: