Hide or show content using jquery toggle method

Today’s topic is,

Hide or show content using jquery toggle method

I’m going to teach you to create a simple hide or show content functionality using jquery toggle method – which will allow you to hide or show content, sections, elements etc on mouse click.

To achieve the functionality of show or hide content -we’ll need to use jquery toggle method. You can even visit the jquery site where it contains Toggle function.

Markup needed:

After the markup, we’ll need to create an click event – so that when you click on the show link, it should trigger the function. It is as follows:

Click event:

Also, for the toggle function to work on your browsers – you’ll need to ad the jquery plugin. You can use the below hosted version of it as seen below. This is hosted by Google on their server.

Full code:

Once you’re done – you’ll see the output as seen in the below screenshot.

Before the click event:

 

Hide or show content using jquery toggle tutorial - PepFry

Hide or show content using jquery toggle method

After the click event:

Hide or show content using jquery toggle tutorial - PepFry

Hide or show content using jquery toggle method

Hope you enjoyed going through this tutorial “Hide or show content using jquery toggle method“. Please go through the HTML and jQuery snippet and understand it. You’ll be able to do more on these kind in future!

Any question – please write back to me, I’ll try to answer it asap. Hope to see your positive suggestions as well.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">