Hiding Div until clicked

[Siberian]

When clicking on the word reachme, there is an event that occurs, the problem is not with the anchor or the event. The problem, keeping the #reachme div hidden until the anchor is clicked. I've adjusted the height of class.capsuleb, including adding display:none and/or overflow:hidden to the class.capsuleb as well as the same css rules as mentioned to #capsule.capsuleb without any success in hiding the div ?

[Link]

[almostbob]

code, not link please

[Siberian]

I gave the link because I want to hopefully solve it with CSS ?

[hericles]

I haven't tried this yet but I think you would need to use a combination of .height() and .offset. Height can give you the height of the window, which means you can find your starting location for the popping up div.
Offset can find the location of the menu thereby giving you the end point of animation.
I don't think CSS can be used to detect the bottom of the page but I maybe wrong.

[Siberian]

I had a dicussion with someone else regarding this problem, they mentioned it can be done with CSS, there solution was sloppy.

[almostbob]

with a link the fixer has to view source to see what is wrong,
that will miss anything serverside that is stripped before being sent to the browser

the solution is the same basic method as a css dropdown flyout menu,
using :active and/or :focus, instead of :hover top open on click instead of mouseover

unthought example, may not be correct to the rest of the OP page code
the hidden div is always a child of the anchor div, located by css

<div id='anchor'>click me<div id='hiddenchild'>hidden text</div></div>

<style>
#hiddenchild {bottom:0; left:0; display:none;z-index:10;} //positioned & sat above other elements so it wont smoosh the page
#hiddenchild:focus {display:block;}
#anchor:focus #hiddenchild {display:block;}

hidden child does not display when anchor or hiddenchild is not focused,
you can click anchor, open hiddenchild then scroll around hiddenchiled untill you click anywhere else

Id was chosen as the op asked about singular items
classes and elements link similarly

[Siberian]

The event is not on mouse over it's on click ?!?!

[almostbob]

If :hover, the hidden element drops out again, when moving from the anchor to the hidden element, as soon as the mouse is no longer over the anchor
:focus remains until you focus on something else

error corection:

the hidden div is always a child of the anchor div, located by css

above should be
the hidden element is always a child of the anchor element, located by css
can be any elements as long as they are parent and child

[Borzoi]

Do you want the div to be displayed for the duration the mouse button is clicked or do you want it to stay displayed after a single click?

[Siberian]

I want it to be hidden until the event is clicked. Neither display:none or overflow:hidden, are revealing the DIV when the event is clicked.

[Borzoi]

Using the CSS display: none will mean that it will always be hidden. It sounds like you're looking for a solution which will require Javascript or JQuery. If it was a case that you just wanted it display for as long as the mouse button is clicked, you could use the tag.class:hover CSS feature.

I tend to avoid Javascript and JQuery unless it's absolutely necessary so I wouldn't be the best person to ask for a working solution here.

[Siberian]

Thanks, I suppose I have to hide the DIV until the event is triggered.