Jared Heinrichs

  • Technology Blog
  • Winnipeg Computer Repair
  • Winnipeg Photographer
  • Cooking With Jared
You are here: Home / Programming / jQuery / How to use toggle and toggleClass in jQuery

Oct 24, 2010 By Jared Heinrichs Leave a Comment

How to use toggle and toggleClass in jQuery

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

image

CSS

image

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

image

  • 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.

Filed Under: jQuery Tagged With: How To

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Board Game Rules
  • Camera
  • Computer Hardware
    • Blackberry
    • drivers
    • iPad
    • Magic Jack
    • USB
  • Damn Small Linux
  • Exam Notes
  • Facebook
  • FREE Flashcards
  • Games
    • PC
      • League of Legends
    • Wii
    • xbox 360
  • Music
  • Networking
    • Cisco Certification
    • Mitel
    • Palo Alto Firewall
  • News
    • Google
    • Microsoft
  • Operating System
    • Active Directory (2003)
    • Android
    • Command Prompt
    • Damn Small Linux
    • Group Policy
    • Hyper-V
    • IIS
    • ISA 2006
    • Mac OS X
    • Microsoft Exchange Server
    • Powershell
    • Security
    • SME Server
    • Terminal Server 2003
    • Ubuntu Linux
      • Adito Web SSL VPN
      • OpenVpn-als
      • Webmin
    • Virtual Machine Manager
    • Windows 2003 SBS
    • Windows 2003 Server
    • Windows 2008
    • Windows 2008 R2
    • Windows 2012R2
    • Windows 7
    • Windows 8
    • Windows Command Line
    • Windows Deployment Services
    • Windows Server Backup
    • Windows Vista
    • Windows XP
  • Phones
  • Photography
  • Photos
    • Animals
    • Misc
    • Nature
    • Portraits
  • Portfolio
  • Programming
    • CSS
    • HTML
    • jQuery
    • MySQL
    • PHP
    • Script
  • Programs
    • Acrobat
    • Acrobat Reader
    • Adobe Dreamweaver
    • Adobe Illustrator
    • Adobe Photoshop
    • Anti-virus Software
    • Antivirus
    • Backup Exec
    • Bittorent
    • Blackberry BESADMIN
    • Internet Explorer 9
    • Lightroom
    • Microsoft Office
    • Netbeans
    • Onenote
    • Outlook
    • Shelby
    • Sysprep
    • Trend
    • Video Editing
    • Visual Studio
    • Windows Live Writer
    • WireShark
    • XP Mode
    • Zarafa
  • Recipe
  • Review
  • Software Links
  • Troubleshooting
  • Uncategorized
  • Videos
  • Web Applications
    • Brage
    • Google
    • Spiceworks
    • Wordpress
  • Web Browsers
    • Internet Explorer
  • Web Server
    • XAMPP
  • Winnipeg
    • ISP

Try searching this site!

Copyright © 2021 Winnipeg Web Design