Description
These scripts demonstrate the functionality of the toggle and toggleClass methods respectively. When you click on ‘Click Me’ under the first box, we are using the toggle method. This method essentially toggles the display of the element between block and none. Therefore, since we are starting with a style of display: block (default style associated with the block level element ‘div’), when we click on the anchor tag and run the script, we are switching the display to none, thus hiding the box. If we click again, the box is toggled back to being displayed as block. We can pass in a parameter of time to determine over what time frame we would like this to happen (slow, medium, fast, or a specific time in milliseconds, for example 2000).
The second box demonstrates the toggleClass method. The toggleClass method essentially checks to see if a targeted element has a specific class. In this example, we are checking the div with id ‘box’ to see if it has a class of ‘border’. If it does not, it will add a class of ‘border’, if it does, it will remove it, so it essentially toggles the class name of ‘border’ on the targeted element (div id=”box”) when the anchor tag is clicked. Generally, after the class is added, there are designated styles associated with the class to change the look of the element. In this case, we are adding border styles.
Clicking on the paragraphs demonstrates this same functionality by adding or removing a class of ‘highlight’ when that particular p is clicked and then assigning the appropriate styles accordingly.
View the source below for further comments on each line of code.
Demo:
Click this paragraph block to highlight it. Click again to un-highlight it.
This is another paragraph block you can hightlight.
And another.
The Code:
HTML
<div id="box2"></div> <a href="#">Click Me</a> <div id="box"></div> <a href="#">Click Me</a> <p>Click this paragraph block to highlight it. Click again to un-highlight it.</p> <p>This is another paragraph block you can hightlight.</p> <p>And another.</p>
CSS
<style type="text/css">
#box,#box2 {width: 200px; height: 200px; background: red;}
.border {border: 5px solid black;}
.highlight {background: yellow;}
</style>
jQuery
<script type="text/javascript">
$(function() {
$('#box2 + a').click(function() { // this is getting the a that is directly after and only directly after the div with id box2 and running the click function. '#box2 ~ a' would get all a's after #box2 and run the click function.
$('#box2').toggle(2000); // the toggle method essentially changes the display from block to none (on the targeted element, in this case div id box) each time the anchor tag is clicked. You can pass in parameters of length with slow, normal, fast, or a specific length, for example 2000 milliseconds (2 seconds).
return false;
});
$('#box + a').click(function() { // this is getting the a that is directly after and only directly after the div with id box and running the click function.
$('#box').toggleClass('border'); // This checks the div with id box to see if it has a class of 'border'. If it does not, it will add a class of border, if it does, it will remove, so it essentially toggles the class name of 'border' on the targeted element, #box. Generally, after the class is added, there are designated styles associated with the class to change the look of the element.
return false;
});
$('p').click(function() {
$(this).toggleClass('highlight'); // This does the same thing as above but checks for p elements and toggles the class of 'highlight' when they are clicked. Using 'this' instead of 'p' allows us to add the class to just the specific p that is clicked as opposed to all p's.
});
});
</script>
View the ThemeForest.net Screencast »
