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


Tags: javascript,html,css,css3,javascript-events

Problem :

I have a page with a link, that I want that everytime 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.


    CSS Howto..

    How to place a consistent 5px margin around an inner div without specifiying inner divs height?

    How can I fix the footer to dynamically change with height of the grid sections as they increase?

    How to add CSS class to body tag in Wordpress using body_class

    How can I get drop-down functionality working with CSS?

    How to avoid text wrap when the parent element has position absolute?

    CSS How to make a DIV that starts 100px from the top reach the bottom of the page

    How do you solve this Chrome button border bug?

    Hovering over a container div shows hidden div. When cursor is put over hidden div, behavior of container div changes

    how to change some css Properties according to text length

    How to modify CSS via JQuery

    drupal themes: how do I include several css files / js files on my theme's .info file?

    CSS: How to set hover effect on menu-item when submenu-item is displayed

    How to begin typing from vertical middle of textarea

    How to auto fit input field after dynamically added spans?

    How to pause or delay animation using JavaScript/jquery

    How to give viewers custom CSS option

    How to blend CSS classes for different results

    Css. How to move div with fixed position up if it overlays footer

    How to create a web page with 4 rectangurlar splits?

    asp.net mvc view css not showing as expected

    How to position a css radial gradient to the top left responsively?

    how to drag and drop a
    across the page

    CSS: How do I make a !100% header with a repeat-x background and tip

    How to make gridview and cells bigger?

    How to vertically align text inside
  • in a CSS based drop-down menu?
  • How to set two values for one css property?

    How to refresh div using ajax refresh?

    How to hide overflow on slideshow without hiding arrows?

    How to dynamicaly change css style?

    How to restore CSS style to its super class