Introduction

In this post we will how we can understand the JQuery basics and will walkthrough with code.

Scenario

In many cases, we will have simple scenario like we need to show/hide or toggle the functionalities. Consider we have simple content user can like and unlike.

Code

We simple page that user can like and unlike, the text in the content and button values will change.

Jquery1.jpg

Let's see how we can do the same thing in JQuery:

Jquery2.jpg

Here we have used the Jquery toggle event option, “it binds two or more handlers to the matched elements, to be executed on alternate clicks”.

http://api.jquery.com/toggle-event/

There is another functionality we do with the toggle, “Display or hide the matched elements”.

Jquery3.jpg

As a result we will see the tick image toggle (Show/Hide) while click the like button.

Jquery4.jpg

Summary

Here we will recap the JQuery “toggle” functionality.