How to Hide Div Code jQuery

Written by ian low
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Hide Div Code jQuery
The contents of a chapter in a book can be displayed or hidden on a Web page using JQuery to hide DIV code. (Jupiterimages/ Images)

Hiding sections of a Web page or details under headlines can help provide a tidy appearance that makes a page more appealing, particularly for news or information-related pages. Complex coding is required to build the kind of functionality in JavaScript that allows you to show or hide subsections as and when required. However, JQuery, a library of JavaScript functions, allows you to accomplish the task easily and generically.

Skill level:

Other People Are Reading

Things you need

  • Notepad

Show MoreHide


  1. 1

    Download the JQuery library jquery-1.5.1min.js from the download link provided in the References section. In the download dialogue box, select "Save As..." and save the library to your desktop.

  2. 2

    Copy and paste the following code into Notepad, and save it as hidediv.html on your desktop. This consists of four layers of nested DIVs with links to display or hide each nested DIV. The DIV ID and link IDs such as "sheep," "sheep_1," etc. indicate the section name and nested DIV level.


    <script type='text/JavaScript' src='jquery-1.5.1.min.js'></script>


    <div id='sheep'>Baa baa black sheep, have you any wool?

    <a href='#a1' id='sheep' class='showOpt'></a>

    <div id='sheep_1'>Yes sir, yes sir, three bags full,

    <a href='#a1' id='sheep_1' class='showOpt'></a>

    <div id='sheep_2'>One for my master, one for my dame,

    <a href='#a1' id='sheep_2' class='showOpt'></a>

    <div id='sheep_3'>And one for the little boy that lives in our lane.

    </div> </div> </div> </div>



  3. 3

    Copy and paste the following "toggleDiv()" JQuery function, above the line "</script></body></html>," so that it runs after all the HTML objects have been loaded. This JQuery function takes the show-or-hide link ID, e.g. "sheep_1," as a parameter and hides or shows the next nested DIV depending on whether the attribute "isShowing" is currently set to "yes" or "no." It uses the JQuery "fade Toggle()" method to toggle between the two states. The final three lines hide all levels from the grandchild level and below to ensure that only the currently selected child level is displayed on selection.





    }else {







  4. 4

    Copy, and paste the click event function after the end of the "jQuery.fn.toggleDiv" function. Whenever a link with class "showOpt" is clicked, it calls the toggleDiv function with the current ID as the parameter.




  5. 5

    Copy, and paste the following line after the end of the preceding click-event function. When the page loads, all the nested DIVs are displayed by default. This line needs to be added, so that just when the page finishes loading, all the DIVs below the "sheep" DIV are hidden.


  6. 6

    Save hidediv.html and test the page by clicking on the show and hide links.

Tips and warnings

  • To change the animation effect of the showing and hiding, you can use "slide Toggle()" or "toggle()" instead of "fade Toggle()."

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.