This is going to be a fun one. It’s amazing how many desktop application use a toggle like ability to create illusion of animation. An example of toggle is if you are in almost any program and need to use the bold button. You’d click it to enable it. You’d click it again to disable it again.
I’m going to go over some code that will cover both items in one page.
xhtml
CSS
I’ve created 1 id and two classes. They all should be pretty straight forward to read. Box ID give anything that is given the ID of box a size of 300×300 red square. The border class give any item that uses the class a border. Similarly the highlight class gives anything that has the class highlight applied to it a yellow background.
jQuery
- Line 1 – When the document is ready run some jQuery Code.
- Line 2 – If the anchor tag with the class of toggle is clicked run some code.
- Line 3 – Toggle and item that has the ID of #box. Basically this removes “#box” and then when clicked again “#box” is re-enabled. *NOTE* – When remove #box and the box disapears all HTML elements all move up 300px;
- Line 5 – If the anchor tag with the class of toggleClass is clicked run some code.
- Line 6 – Toggle any item that has the ID of “#box” applied to it. It then instantly has the css properties of what ever the class properties are.
- Line 8 – When ever a paragraph tag is click run some code
- Line 9 – What ever paragraph tag is clicked give it the class of “highlight”. Because I used “this” any time I single click a p tag the script thinks of it as it’s own unique element. If I would have used ‘p’ instead of ‘this’ any time I click one paragraph tag all paragraph tags are highlighted.
I hope you have a better understanding of toggle and toggleClass in jQuery now.
Leave a Reply