{"id":1082,"date":"2011-05-11T22:36:28","date_gmt":"2011-05-11T22:36:28","guid":{"rendered":"http:\/\/www.phpmind.com\/blog\/?p=1082"},"modified":"2011-05-11T22:43:58","modified_gmt":"2011-05-11T22:43:58","slug":"how-to-show-hide-content-using-core-javascript","status":"publish","type":"post","link":"https:\/\/www.phpmind.com\/blog\/2011\/05\/how-to-show-hide-content-using-core-javascript\/","title":{"rendered":"How to Show hide content using core JavaScript ?"},"content":{"rendered":"<p>Today I was working on another website and had very long text\/content and thought to use Jquery, there are several examples given on internet. I tried to use some of them of course they are very simple but because of some reason it didn&#8217;t work for me either in IE and chrome.<br \/>\nSo decided to compile my own show hide JavaScript which is based on DOM!<br \/>\nHere is very simple code and it works everywhere, Firefox, Internet Explorer, Chrome, Safari etc.<\/p>\n<p>Steps are self explanatory.<br \/>\nA.\tUse JavaScript code<br \/>\nB.\tUse Css Class<br \/>\nC.\tSee the example and compile your own!<\/p>\n<pre lang=\"js\">\r\n<script language=\"javascript\" type=\"text\/javascript\">\r\nfunction PM_show_Hide(pmID) {\r\n   if (document.getElementById(pmID)) {\r\n      if (document.getElementById(pmID+'-show').style.display != 'none') {\r\n         document.getElementById(pmID+'-show').style.display = 'none';\r\n         document.getElementById(pmID).style.display = 'block';\r\n      }\r\n      else {\r\n         document.getElementById(pmID+'-show').style.display = 'inline';\r\n         document.getElementById(pmID).style.display = 'none';\r\n      }\r\n   }\r\n}\r\n<\/script>\r\n<style type=\"text\/css\">\r\n   .more-pm {\r\n      display: none;\r\n<\/style>\r\n<\/pre>\n<pre lang=\"html\">\r\n\r\n<p>This is first paragraph of my big content. \r\n<a href=\"#\" id=\"PM-show\" class=\"showLink\" onclick=\"PM_show_Hide('PM');return false;\">Click to See more.<\/a> <p>\r\n\r\n<div id=\"PM\" class=\"more-PM\">\r\n         <p>Here is your hidden text which you want to hide!! Copy your text here!<\/p>\r\n         <p><a href=\"#\" id=\"PM-hide\" class=\"hideLink\" onclick=\"PM_show_Hide('PM');return false;\">Click to hide this  content.<\/a><\/p>\r\n      <\/div>\r\n\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Today I was working on another website and had very long text\/content and thought to use Jquery, there are several examples given on internet. I tried to use some of them of course they are very simple but because of some reason it didn&#8217;t work for me either in IE and chrome. So decided to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[27],"tags":[],"class_list":["post-1082","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/comments?post=1082"}],"version-history":[{"count":6,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1082\/revisions"}],"predecessor-version":[{"id":1087,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1082\/revisions\/1087"}],"wp:attachment":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/media?parent=1082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/categories?post=1082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/tags?post=1082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}