-
quick easy question
i have this simple code:
Code:
<html>
<head>
<title>menu mockup</title>
<style type="text/css">
.show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #list { display:none; }
@media print { .hide, .show { display: none; } }
</style>
</head>
<body>
<p>Here's a list</p>
<div>
<a href="#" class="hide">[hide]</a>
<a href="#" class="show">[show]</a>
<ol id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</div>
</body>
</html>
It shows the expanded version and 'hide' link as default. I can't seem to get it to reverse this - show collapsed version with 'show' link as default.
Anyone??
Thanks and Blessings
-
Not sure if you're trying to not use javascripts intentionally but, if not, you may find these links useful.
http://www.murraytestsite.com/collapsiblelist.htm#
For pure CSS check out:
http://www.thecssninja.com/css/css-tree-menu
-
Nothing against JS per se. I just hate the grey button look that I have never been able to change and have it look right cross-browser.
Im not even trying to do this to display lists, I just used them for the example.
I want to display the first few lines of essays, and have a <see more> botton that stays in place at the bottom whether expanded or collapsed.
I haven't used CSS since 2.1 and Im real rusty.
The code I posted is great, its just the wrong default mode and no tampering that Ive done has fixed it.
