LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » CSS Codes / HTML-CSS-PHP-JavaScript » How To Open/Show And Close/Hide DIV With CSS Code?

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

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…

Recommended For You:
Add A Simple Pagination On Long Table Using Pure Vanilla JavaScript

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.

Recommended For You:
Get Headers And Content Of A URL Using Single CURL Request In PHP

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

<!-- This Is A CopyRight Code.It Is Free To Use But With HTML Design Code.
If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. --><a onmouseup="document.getElementById('exestylepopupdiv').style.display='none'">Click To Close</a>
<div id="exestylepopupdiv">
</div>
<!-- This Is A CopyRight Code.It Is Free To Use But With HTML Design Code.
If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->

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

<!-- This Is A CopyRight Code.It Is Free To Use But With HTML Design Code.
If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
<a onmouseup="document.getElementById('exestylepopupdiv2').style.display='block'">Click To Open</a>
<div id="exestylepopupdiv2" style="display:none;">
</div>
<!-- This Is A CopyRight Code.It Is Free To Use But With HTML Design Code.
If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->

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.

Recommended For You:
How To Set Value Of Input type="datetime-local" Via Pure JavaScript?

You Like It, Please Share This Recipe With Your Friends Using...

6 Responses to “How To Open/Show And Close/Hide DIV With CSS Code?”

  1. Anonymous says:

    This is javascript.

  2. Alpesh says:

    hi Muhammad,
    Mujhe Aap ki site se bhot kuchh sikhne ko milta he
    me har 2 me visit karta hu taki kuchh naya sikhne ko mile
    kya aap bta sakte he ki me is code ka upyog keise karu?
    can i put video in it??
    Help……

    • EXEIdeas says:

      Thanks For Visiting Us And Liking Our Content, You Can Add Anything In It, Feel Free To Ask Anything, Be With US To Get More…

  3. Alpesh says:

    i like your Quick Responce too.
    i want to add a video and created an HTML document for it.
    can you please tell me how/where can i put that in easy words…

    Ex.

    • EXEIdeas says:

      Thanks For Your Liking Our Service, Just Contact Us Via Contact Form And Add Your Video Link There, We Will Create Thyis Widget For You. Happy Blogging…

Leave a Reply to EXEIdeas Cancel reply

Your email address will not be published. Required fields are marked *