Hide and Show a Div Using Javascript:-This tutorial will show you how to create a hidden Div and display it with the click of a link. There are a few reasons you may want to hide a Div in a website design. You may want to create a drop down type menu or a box that will show more information when you click a link. Another reason would be for SEO purposes. In theory hiding information in a Div is not against Google’s rules. As long as the user can still see the content when clicking a button you are not displaying different information to the user than you are to the search engine.

First we are going to start with a very basic page layout and create a 2 Divs. One will be shown and one will be hidden. Here is the starting code.

Seven ways to toggle an element with JavaScript:-There are litterally an unlimitted number of ways to toggle an element’s display with JavaScript. Some, more useful than others. Dating back to the late nineties, toggling is perhaps the oldest trick in the book within JavaScript development. However, to this day, it still proves itself useful as hiding/showing elements can improve user interaction (when done tastefully).

Anyway, here are seven ways toward achieving just that.
The bottom line
First off, this is perhaps the simplest and shortest way to toggle.
toggling the short way

Cool. Now that we’ve got this thing nice and compact… can’t we do anything else to make it cool? Why, of course. Let’s say, instead of limitting it to just one object, let’s say “unlimitted.”
toggling multiple objects

Sweet. Now that looks nice and sexy (quite personally, I think it’s the sexi’est’). But let’s see if we can extract any of these into “showing” versus “hiding” using an object literal.
separating showing and hiding