Slide Toggle Effect Using jQuery

So, it looks like you are searching for having the slide toggle effect for your HTML project and accidentally landed in this page. It seems that you are in luck, as here we will be describing about how to create the slide toggle effect using jQuery for your site. Hence, now we will go ahead and describe you about how to do it for your site or any HTML or PHP projects.

First of all, what we would like to say is that, if you want to create the slide toggle effect for the any div or parts of your site, then, you can achieve it via the jQuery library easily, since it has the build in function on it for the toggling effect. Now lets go ahead and put your waiting time no more and the discuss on this. For this feature to be added in your site, you may require to follow up these below steps:

Add the required HTML codes

This seems to be the most necessary step, since it will tell us the part in which we will provide the information as where to make the toggle effect in the different parts of the current HTML document of your site. Here, we have provided the example code on this below:

<div class="toggle-hide">Enable Toggle</div>
<div class="toggle-effect">
    <p>This is because of the toggle effect.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Adding required CSS codes to hide the div by default

Now, since the HTML code to be inserted is now up and running, now the remaining part next is that, we will need to add the CSS code to hide that div, which need to be toggled by default, which is toggle-effect. To do so, you can use the below provided CSS code to hide it:

.toggle-effect {
    display: none;
}

Apply the required script in your script file

Now, if you have completed above steps and created those files for your site, then, now finally comes the step to add the required script file to make the slide toggle effect for that div or part to display and not to display effect using it. The script to be added in that file is as below:

jQuery(document).ready(function () {
    jQuery(".toggle-hide").click(function () {
        jQuery(".toggle-effect").slideToggle("slow");
    });
});

Now, if you have completed all of the steps mentioned above, then, your site will look something like the below image. But, if you could not see that same, then, you need to follow the above tutorial again and redo those works.

Now, after you click on the above button as shown in the image, ie, Enable Toggle button, then, you will have the toggle effect for that part or div to display and not to display it. So, if you click on that button, then, the display of that div will be something like the below image, ie, when you click that button, it will display the hidden content upon clicking the above button:

Here, in this steps to summarize the whole process, what you have to do is, take the unique class and apply the CSS code of not displaying that div or part. And after it is done, you need to find other unique div to make the toggle effect available for that div, which is hidden, here in our case, we have used toggle-hide class, and then, now you need to apply the slideToggle effect of the jQuery library to that div, here we have used toggle-effect class, which has been hidden from the CSS code. By following this way, you can gain the slide toggle effect for your site via jQuery library.

Conclusion

If you have followed the above tutorial properly and gained the same effect which we have discussed in this page, in your development environment, then, we can assume that you are more familiar with creating the slide toggle effect for your site using the jQuery library.