The accordion is an expandable collapsable container layout which takes less space within the page. It is divided into multiple sections or parts and each has contents.
How it’s Work?
The user only able to view one section at a time for seeing other sections content he/she need to expand that section. When a section header gets clicked then it expands and show its content and collapsed previously opened section.
When its require?
When you page contains many forms or contents here, you can use it to divide them into various sections the effect of this is that now its look more user-friendly and easy to navigate.
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.
In this tutorial, we will learn How you can use jQuery to show and hide the table column.
When does it require ?
When the table has multiple columns and you want to allow the user to hide and show those columns which user doesn’t want to see on the screen. This gives more flexibility to the user.
What in the Demonstration ?
In the demonstration, we will create a Table structure which shows employees list and adding some checkboxes. When checkboxes get checked then hiding the Table column based on selection and reset it when it is unchecked.
Drag and drop is a simple way to allow the users to upload their files by dropping to the container. Nowadays most websites allow uploading using both drag and drop and the file browse e.g. PushBullet, Facebook, SlideShare, etc.
I am using AJAX to save the file to the server which triggers when the file dropped on the target container.
In this tutorial, I show how you can implement the similar type of feature in your project and which show thumbnail when the file successfully uploaded.