{"id":1612,"date":"2008-07-27T11:01:47","date_gmt":"2008-07-27T15:01:47","guid":{"rendered":"http:\/\/teamtutorials.com\/?p=1612"},"modified":"2008-10-26T14:45:38","modified_gmt":"2008-10-26T18:45:38","slug":"hide-and-show-a-div-using-javascript","status":"publish","type":"post","link":"https:\/\/teamtutorials.com\/web-development-tutorials\/hide-and-show-a-div-using-javascript","title":{"rendered":"Hide and Show a Div Using Javascript"},"content":{"rendered":"

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\u2019s 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.<\/p>\n

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.<\/p>\n

\r\n<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">\r\n<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">\r\n<head>\r\n<title>Hidden Div<\/title>\r\n<\/head>\r\n\r\n<body>\r\n<div id="main">This is not hidden.<\/div>\r\n\r\n<div id="hidden">This is hidden.<\/div>\r\n\r\n\r\n<\/body>\r\n<\/html>\r\n\r\nOk now I will add some basic style to these boxes.\r\n<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">\r\n<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">\r\n<head>\r\n<title>Hidden Div<\/title>\r\n\r\n<style type="text\/css">\r\n<!--\r\n#main{\r\n\twidth:500px;\r\n\theight: 20px;\r\n\tbackground: lightblue;\r\n}\r\n#hidden {\r\n\twidth:300px;\r\n\theight:20px;\r\n\tbackground: lightgrey;\r\n}\r\n-->\r\n<\/style>\r\n\r\n\r\n<\/head>\r\n\r\n<body>\r\n<div id="main">This is not hidden.<\/div>\r\n\r\n<div id="hidden">This is hidden.<\/div>\r\n\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
The page should look like this so far.
\n\"\"<\/a><\/p>\n
Now to hide the div. To do this we will change the display to none in the CSS for the #hidden div. See the code below.<\/p>\n
\r\n<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">\r\n<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">\r\n<head>\r\n<title>Hidden Div<\/title>\r\n\r\n<style type="text\/css">\r\n<!--\r\n#main{\r\n\twidth:500px;\r\n\theight: 20px;\r\n\tbackground: lightblue;\r\n}\r\n#hidden {\r\n\twidth:300px;\r\n\theight:20px;\r\n\tbackground: lightgrey;\r\n\tdisplay: none;\r\n}\r\n-->\r\n<\/style>\r\n\r\n\r\n<\/head>\r\n\r\n<body>\r\n<div id="main">This is not hidden.<\/div>\r\n\r\n<div id="hidden">This is hidden.<\/div>\r\n\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Now when you preview the page you will not see the Div.
\n\"\"<\/a><\/p>\n
In order to show the div we will need to add a Javascript function. We will pass the ID attribute of the Div to the function. Basically this means that we can use this one function to show or hide more than one Div on the same page. Below is the Javascript code that we will add the the Head section of the page.<\/p>\n
\r\n<script language="JavaScript">\r\n\tfunction toggle(id) {\r\n\t\tvar state = document.getElementById(id).style.display;\r\n\t\t\tif (state == 'block') {\r\n\t\t\t\tdocument.getElementById(id).style.display = 'none';\r\n\t\t\t} else {\r\n\t\t\t\tdocument.getElementById(id).style.display = 'block';\r\n\t\t\t}\r\n\t\t} \r\n<\/script>\r\n<\/pre>\n
The script above is creating the function \u201ctoggle\u201d an passing the value \u201cid\u201d. Next we are using the Document Object Model to get the current state of the display attribute. Then if \u201cdisplay: block;\u201d for the #hidden div we will change it to be \u201cdisplay: none;\u201d else we will change the display to none. <\/p>\n
Add the code to your page in the head just below the style.<\/p>\n
\r\n<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">\r\n<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">\r\n<head>\r\n<title>Hidden Div<\/title>\r\n\r\n<style type="text\/css">\r\n<!--\r\n#main{\r\n\twidth:500px;\r\n\theight: 20px;\r\n\tbackground: lightblue;\r\n}\r\n#hidden {\r\n\twidth:300px;\r\n\theight:20px;\r\n\tbackground: lightgrey;\r\n\tdisplay: none;\r\n}\r\n-->\r\n<\/style>\r\n\r\n<script language="JavaScript">\r\n\tfunction toggle(id) {\r\n\t\tvar state = document.getElementById(id).style.display;\r\n\t\t\tif (state == 'block') {\r\n\t\t\t\tdocument.getElementById(id).style.display = 'none';\r\n\t\t\t} else {\r\n\t\t\t\tdocument.getElementById(id).style.display = 'block';\r\n\t\t\t}\r\n\t\t} \r\n<\/script> \r\n\r\n\r\n<\/head>\r\n\r\n<body>\r\n<div id="main">This is not hidden.<\/div>\r\n\r\n<div id="hidden">This is hidden.<\/div>\r\n\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Now all we have to do is create a link that will call the toggle function and pass the ID of the Div we want to toggle. We will create a link that goes no where and add the onclick property below.<\/p>\n
\r\n<a href="#" onclick="toggle('hidden');">Toggle Div<\/a>\r\n<\/pre>\n
Add the link to your visible div.<\/p>\n
\r\n<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">\r\n<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">\r\n<head>\r\n<title>Hidden Div<\/title>\r\n\r\n<style type="text\/css">\r\n<!--\r\n#main{\r\n\twidth:500px;\r\n\theight: 20px;\r\n\tbackground: lightblue;\r\n}\r\n#hidden {\r\n\twidth:300px;\r\n\theight:20px;\r\n\tbackground: lightgrey;\r\n\tdisplay: none;\r\n}\r\n-->\r\n<\/style>\r\n\r\n<script language="JavaScript">\r\n\tfunction toggle(id) {\r\n\t\tvar state = document.getElementById(id).style.display;\r\n\t\t\tif (state == 'block') {\r\n\t\t\t\tdocument.getElementById(id).style.display = 'none';\r\n\t\t\t} else {\r\n\t\t\t\tdocument.getElementById(id).style.display = 'block';\r\n\t\t\t}\r\n\t\t}\r\n<\/script>\r\n\r\n\r\n<\/head>\r\n\r\n<body>\r\n<div id="main">\r\n\tThis is not hidden.\r\n\t<a href="#" onclick="toggle('hidden');">Toggle Div<\/a>\r\n<\/div>\r\n\r\n<div id="hidden">This is hidden.<\/div>\r\n\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Save the file and test. You should not see the Div when the page loads. When you click the toggle link the hidden box will appear.
\n\"\"<\/a><\/p>\n
Here is an example of something you could use this for. I have a site for deals on clothing. Now if we wanted to add some quality SEO content to help the site rank we could put it in a hidden div so that it doesn\u2019t distract the customer.
\n\"\"<\/a><\/p>\n
When the div is clicked it could expand with SEO rich content and links.
\n\"\"<\/a><\/p>\n
I know the tutorial was pretty basic, but I hope that the example above gives you an idea of how this can be used. I may also expand this into another tutorial and show you how to create a nice menu using the technique.<\/p>\n","protected":false},"excerpt":{"rendered":"
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\u2019s 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.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30,46,17],"tags":[50,164,49,56,55,57],"yoast_head":"\nHide and Show a Div Using Javascript<\/title>\n<meta name=\"description\" content=\"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\u2019s 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.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/teamtutorials.com\/web-development-tutorials\/hide-and-show-a-div-using-javascript\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Johnathan Ward\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/teamtutorials.com\/#website\",\"url\":\"https:\/\/teamtutorials.com\/\",\"name\":\"Team Tutorials\",\"description\":\"Learn something new today\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/teamtutorials.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/hide-and-show-a-div-using-javascript#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/07\/hide-show-div-with-javascript-01.jpg\",\"contentUrl\":\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/07\/hide-show-div-with-javascript-01.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/hide-and-show-a-div-using-javascript#webpage\",\"url\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/hide-and-show-a-div-using-javascript\",\"name\":\"Hide and Show a Div Using Javascript\",\"isPartOf\":{\"@id\":\"https:\/\/teamtutorials.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/hide-and-show-a-div-using-javascript#primaryimage\"},\"datePublished\":\"2008-07-27T15:01:47+00:00\",\"dateModified\":\"2008-10-26T18:45:38+00:00\",\"author\":{\"@id\":\"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9\"},\"description\":\"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\\u2019s 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.\",\"breadcrumb\":{\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/hide-and-show-a-div-using-javascript#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/teamtutorials.com\/web-development-tutorials\/hide-and-show-a-div-using-javascript\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/hide-and-show-a-div-using-javascript#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/teamtutorials.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hide and Show a Div Using Javascript\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9\",\"name\":\"Johnathan Ward\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/teamtutorials.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r\",\"caption\":\"Johnathan Ward\"},\"description\":\"Johnathan Ward is an experienced developer and consultant that writes tutorials to help other developers. In his day job, he is an IBM Watson Consultant with several years of experience deploying and customizing Watson Explorer solutions.\",\"sameAs\":[\"http:\/\/johnathanward.com\",\"https:\/\/twitter.com\/spyderman4g63\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Hide and Show a Div Using Javascript","description":"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\u2019s 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.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/teamtutorials.com\/web-development-tutorials\/hide-and-show-a-div-using-javascript","twitter_misc":{"Written by":"Johnathan Ward","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/teamtutorials.com\/#website","url":"https:\/\/teamtutorials.com\/","name":"Team Tutorials","description":"Learn something new today","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/teamtutorials.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/hide-and-show-a-div-using-javascript#primaryimage","inLanguage":"en-US","url":"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/07\/hide-show-div-with-javascript-01.jpg","contentUrl":"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/07\/hide-show-div-with-javascript-01.jpg"},{"@type":"WebPage","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/hide-and-show-a-div-using-javascript#webpage","url":"https:\/\/teamtutorials.com\/web-development-tutorials\/hide-and-show-a-div-using-javascript","name":"Hide and Show a Div Using Javascript","isPartOf":{"@id":"https:\/\/teamtutorials.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/hide-and-show-a-div-using-javascript#primaryimage"},"datePublished":"2008-07-27T15:01:47+00:00","dateModified":"2008-10-26T18:45:38+00:00","author":{"@id":"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9"},"description":"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\u2019s 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.","breadcrumb":{"@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/hide-and-show-a-div-using-javascript#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/teamtutorials.com\/web-development-tutorials\/hide-and-show-a-div-using-javascript"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/hide-and-show-a-div-using-javascript#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/teamtutorials.com\/"},{"@type":"ListItem","position":2,"name":"Hide and Show a Div Using Javascript"}]},{"@type":"Person","@id":"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9","name":"Johnathan Ward","image":{"@type":"ImageObject","@id":"https:\/\/teamtutorials.com\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r","caption":"Johnathan Ward"},"description":"Johnathan Ward is an experienced developer and consultant that writes tutorials to help other developers. In his day job, he is an IBM Watson Consultant with several years of experience deploying and customizing Watson Explorer solutions.","sameAs":["http:\/\/johnathanward.com","https:\/\/twitter.com\/spyderman4g63"]}]}},"_links":{"self":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts\/1612"}],"collection":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/comments?post=1612"}],"version-history":[{"count":0,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts\/1612\/revisions"}],"wp:attachment":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/media?parent=1612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/categories?post=1612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/tags?post=1612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}