How To Open/Show And Close/Hide DIV With CSS Code?

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...

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.com
2.) 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 <body> </body>.
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:-

<a onmouseup="document.getElementById('exestylepopupdiv').style.display='none'">Click To Close</a>
<div id="exestylepopupdiv">
</div>

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:-

</div>

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.

2 comments:

AnonymousSeptember 19, 2012 at 11:47 PM
This is javascript.

Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Subscribe by email" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quiries contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) You comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfill the requirements.

Let's Your Mind Rock...!!!