How to hide, show, or toggle your div with jQuery


Hiding and showing content is MUCH easier with the magic of jQuery. Here is a simple demo of the jQuery .toggle() function.

Demo

Toggle Button

The content in this div will hide and show (toggle) when the toggle is pressed.

Here is the JavaScript needed to run this demo:

  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  2. <script type="text/javascript">
  3. function toggleDiv(divId) {
  4.    $("#"+divId).toggle();
  5. }
  6. </script>

Continue reading How to hide, show, or toggle your div with jQuery

How to hide, show, or toggle your div

Are you trying to find a way to hide and show your content? The demo below shows a simple yet elegant way of toggling your content and toggling the control text via Javascript and styling.

Demo
click image to expand/collapse==>

This demo uses plus and minus images for hiding and showing your div dynamically via JavaScript. This content will toggle.

We will cover how to implement this example later on in the tutorial but first let’s start with a simple example.

Demo

show < == click here

Continue reading How to hide, show, or toggle your div