Howdy!
I am trying to play with what I thought was a simple style to collapse what I will put into a tableless layout, however I can't get more than ONE to work. For example, I want to have, say 5 rows and be able to expand/collapse each one and have the flexibility to have multiple rows expanded or collapsed simultaneously. Here is the script I found (I think it's off css tricks)
Code:
<!DOCTYPE html>
<head>
<title>menu mockup</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<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>Test</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>
What I would like would be several instances of hide show, like this:
+ SOME CONTENT
+ SOME OTHER CONTENT
- EXPANDED CONTENT
this is some expanded content
+ OTHER CONTENT
- EXPANDED CONTENT
this is some expanded content
+ LAST ROW OF CONTENT
I thought it would be as simple as adding an class/id for each (and reflecting in the HTML), but it doesn't want to work with me. This is what I tried for two rows:
Code:
<style type="text/css">
.show,
.show_1 {
display: none;
}
.hide:focus + .show,
.hide:focus_1 + .show_1 {
display: inline;
}
.hide:focus,
.hide:focus_1 {
display: none;
}
.hide:focus ~ #list,
.hide:focus_1 ~ #list_1 {
display:none;
}
@media print {
.hide, .show,
.hide_1, .show_1 {
display: none;
}
}
I'm not sure if I am misusing the ~ selector, a typo somewhere, or if I'm just way off base all together. I know it's essentially like a collapsible menu, I just can't get this solution to work the way I want. Can anyone help expand on this solution to get me on the right path please? Thanks in advance for taking a look!
-LT