How to create an href that opens a div on screen?

Issue

I have a page with a link, that I want that every time a user clicks on it – it opens a div with content on it - and clicking anywhere will close it.

How do I do this using CSS?
Or should I do this using JavaScript? How?
Is it more recommended to do this using JS?
What loads faster on a webpage?

Fiddle to start with: http://jsfiddle.net/dnaLqa0g/1/

<a href="">A LINK</a>

<div id="popush"> 
    this is some text.
</div>


#popush{
   /*display:none; */
    border: 1px solid black;
    margin:0 auto;
    width: 200px;
    height:100px;
}

Solution

This is commonly done via JavaScript. Maybe jQuery UI Dialog is something you could use?

Generally what you want to do is:

• Prepare your div with content and make it invisible via CSS (display:none) - or use css class instead.
• Attach a click handler to your href and do (display:block) on that div inside the handler.

Your question sounds quite theoretically.. do you also need a code example?

Edit: Um, okay.. seems like I misunderstood the question. I was instantly thinking about dialog, not an accordion.

Answered By - Damb