|
Using JQuery to alter CSS properties of page elements using a checkbox form field |
||||||||
I was recently writing a form where I needed to control the visibility of a div element based on a user selection. If a user checked the checkbox, then a div was to appear with related options in it. This article deals with using JQuery to alter CSS properties on the fly.
Firstly create a checkbox, so that we can click it to view/disable the div we want to control.
2Show div <input type="checkbox" name="intShowMenu" id="intShowMenu" value="1">
Next we will create the div element that we are going to manipulate. This is just a regular div that holds whatever content you want in it.
2
3<b>Additional fields</b><br>
4<input type="text" name="varAdHeader" size="20" value="">
5<p>
6</div>
7
8<div class="header" id="header"></div>
By default I don't want this div to display, so I will use JQuery to set its CSS property to display:none. I have also included a 'header' div to demonstrate altering width and height CSS properties with JQuery.
Next is the JQuery. As per usual call the JQuery library from Google. In our document ready code block we are setting the CSS property of the 'advert-area' div to none using the .css method. It accepts a name value pair to dynamically write CSS for the selected element.
Next there is a selector for 'intShowMenu', so that when it is clicked a show() or hide() event is fired. I have also stacked a CSS write method call here to demonstrate altering two elements with a single click. In this case changing the width of the 'header' div.
2.header {border: 1px #000 solid; width: 200px; height: 100px;}
3</style>
4
5<s/cript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js"></script>
6
7<s/cript type="text/javascript">
8 $(document).ready(function(){
9
10 //Hide div w/id extra
11 $("#advert-area").css("display","none");
12
13 // Add onclick handler to checkbox w/id checkme
14 $("#intShowMenu").click(function(){
15
16 // If checked
17 if ($("#intShowMenu").is(":checked"))
18 {
19 //show the hidden div
20 $("#advert-area").show("fast");
21 $("#header").css("width","300px");
22 }
23 else
24 {
25 //otherwise, hide it
26 $("#advert-area").hide("fast");
27 $("#header").css("width","200px");
28 }
29 });
30 });
31</script>
This allows us to change the visibility, and other properties of elements using JQuery, and no page reloads.
You can view a full demo of this Demo of using a checkbox to show and hide a div using JQuery.
What do you mean by 'disable'? Do you mean to take it out of the DOM altogether? You could apply a CSS class that completely hides it, or re-write the content of the div using text() or html() to be blank?