2013 March 16 Archive - EXEIdeas – Let's Your Mind Rock

Many time ago i am also searching for “How To Open Or Show A Hidden DIV And Close Or Hide An Open DIV With Pure HTML-CSS-DOM Code Without JavaScript Or J-Query Code In Quick Way With Short Code?” but everywhere i got the JavaScript code to open or show and close or hide a div id. But my target is to get only CSS code because i did not want to make my page heavy using even a single line JavaScript. So i start creating Ideas and finally i got the code which seems very easy but it was difficult to generate, However i do this and I am glad to share it with you so that you can also take the Benefits from it and make your page quick to load. There are two codes below, First is to close a div in which you will get the code through which you can close a div and in Second code you will receive that code which will help you to open a hidden div. It’s a simplae code that you can use it anywhere or in any pre built script, like if you have a popup then add it on that to close it or can do anything you want. So without any more preface just visit the live demo and see the list of features and then get the required and desired CODES…#Demo {padding:5px;border:1px solid #ff0000;-moz-border-radius:6px;-webkit-border-radius:6px; background:#F8F8F8; box-shadow: 3px 3px 3px #D44B2C; width:200px;}#Demo{margin-bottom:5px;} #Demo a{color:#D44B2C;background:#F8F8F8;padding:8px 14px;display:inline-block;font-size:12px;line-height:12px;text-decoration:none;text-transform:uppercase;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px} #Demo a:hover{color:#fff;text-shadow:0px 1px 0px #000;background:#D44B2C;text-decoration:none} CLICK HERE TO SEE DEMO Features:1.) This Is Only HTML-CSS Code.2.) There Is No JavaScript Or J-Query Even A Single Line.3.) Quick Quick Quick To Load And Easy To Install.4.) Open And Close, Both Function Available.5.) Fully Customizeable.6.) DOM Effect Added.7.) You Can Add Extra CSS On Both DIV.8.) You Can USe It Anywhere.9.) Basic Code For Pro-Designers.10.) Fully Able To Intregate With Any Script.How To Add In Blogspot?1.) Go To Your www.blogger.com2.) Open Your Desire Blog.3.) Go To “Layout“.4.) Click “Add A Gadget” Where You Want To Add It.5.) Now Scroll To “HTML-JAVASCRIPT“6.) Click “+” Icon To Add It.7.) Now Copy The Below Code And Paste It To There.8.) Leave The Title Empty.9.) Click Save, Now You Are Done.How To Add In Website?1.) Just Go To Your HTML File.2.) Now Copy The Below Code And Paste It Between .3.) Save It, Now You Are Done.There Are Two Type Of Code Added Below, One On To OPEN On Click And Other Is To CLOSE On Click, Just Pick Any Or Both According To Your Desire.To Close A Div Code:- Click To Close Customization:1.) Use Your Same ID Name Which You Want To Close Over Red Text.2.) Don’t Change Blue Text.3.) You Are Free To Change ID Style CSS.4.) Don’t Remove Yellow Text As It’s A CopyRight.5.) Save And Done.=========X=========X=========X=========To Open A Hidden Div:- Click To Open Customization:1.) Use Your Same ID Name Which You Want To Close Over Red Text.2.) Don’t Change Blue Text.3.) You Are Free To Change ID Style CSS.4.) Don’t Change Orange Text.5.) Don’t Remove Yellow Text As It’s A CopyRight.6.) Save And Done.