Some websites allow the user to toggle the password field to see the entered text while registering on the site.
A common example of this – when you set Wifi password within you mobile device where it also allows showing the password.
They provide an element e.g – checkbox or a button when its gets clicked then the password field text visible on the screen and when it again gets clicked then it will hide the visible text and get back to its default state.
You have noticed on Twitter that when you go for a Tweet there it show How many characters are remaining to complete 140 characters and it changes on every character input.
Not only on Twitter there are many other websites that use the same feature. For example – In the medium, you could see this in Bio section there it allows 160 character input after that it didn’t take any inputs.
It works with or without jQuery within the project and also it doesn’t require any other libraries.
It doesn’t upload the file to your server. For uploading, I am using PHP in this tutorial.
You not only upload the file by drag n’ drop you can also use file chooser dialog that’s open when drag n’ drop widget gets clicked. While uploading it shows the progress bar, generates thumbnail image and shows file size in preview after uploading.
In this tutorial, I talked about a two jQuery method – switchClass() and toggleClass(). As their name suggest its related to classes, and they both are used for changing or replacing the class from an element.
When did it use?
You can use them to show the change of state of the element according to the condition, toggling classes within the elements or may be in some other cases.
For example – You have an Education website where students are assigned to courses. When student reading lessons there is an option for setting Lesson state to read or Unread. For showing the change of state you have created two classes one for unread and another for read which you want to use according to the state of a lesson.
In this kind of case you can either use removeClass() and addClass() for removing one class and add another class to an element or do it using a single method (switchClass or toggleClass).
Within tutorial, I am creating a small example for that where I use switchClass() method and various other examples to explain both methods.
When its required
It is required when you have the list of items and you have to select multiple items from the list.
Let me explain with an example –
You are creating a department information form where you also have the list of users, In that case for assigning users you need to check them one by one.
In some cases, you need to assign all users to a department for that you either do it by checking one by one which is a time-consuming process when you have lots of users or create a separate checkbox for this. On a single click, you can either checked them all or uncheck it.