2016 April 04 Archive - EXEIdeas – Let's Your Mind Rock

There are many JavaScript Toggle Button codes snippets are available over internet that is providing this feature to show a DIV if its hidden or same code will hide the DIV if its displaying but we have a little JavaScript Toggle Button code that will do the same as described above. But there are limitations in some snippets but here you can use unlimited DIVs where you can apply this general purpose snippet and can run it easily.This JavaScript Toggle Button will show and hide your hidden or block DIV on click on any button, text or image and works perfectly. This JavaScript Toggle Button is cross browser and will work in any environment. Now garb the little JavaScript Toggle Button from below and use it anywhere.CLICK HERE TO SEE DEMOFeatures:1.) No JQuery File Added.2.) Pure JavaScript Codes.3.) No CSS Added.4.) Simple And Fast Loading Code.5.) Can Work With Any Browser.How To Add In A WebPage?1.) Just Go To Your “Web Page File”.2.) Now “Copy” The Below Codes And “Paste” It To There Positions.3.) “Save” It, Now You Are Done.CSS: body {font: 12px Tahoma, Geneva, sans-serif;}/* panel */.panel, .panelcollapsed {background: #eee;margin: 5px;padding: 0px 0px 5px;width: 300px;border: 1px solid #999;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;}/* panel heading */.panel h2, .panelcollapsed h2 {font-size: 18px;font-weight: normal;margin: 0px;padding: 4px;background: #CCC url(arrow-up.gif) no-repeat 280px;border-bottom: 1px solid #999;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;border-top: 1px solid #FFF;border-right: 1px solid #FFF;border-left: 1px solid #FFF;}/* panel heading on rollover */.panel h2:hover, .panelcollapsed h2:hover {background-color: #A9BCEF;}/* heading of a collapsed panel */.panelcollapsed h2 {background: #CCC url(arrow-dn.gif) no-repeat 280px;border-color: #CCC;}/* panel content - do not set borders or paddings */.panelcontent {background: #EEE;overflow: hidden;}/* collapsed panel content */.panelcollapsed .panelcontent {display: none;} JavaScript: function showBlock(event) {var source = event.target || event.srcElement;if (source.parentNode.className == 'panel') {source.parentNode.className = 'panelcollapsed';} else {source.parentNode.className = 'panel';}} HTML: One panel Content goes here 1