Issue
I’m stuck with a folding menu here.
I managed to get my hands on a script that does exactly what I want but in kind of reverse. In the script the link is “Expanded” by default. I want my link to be contracted by default and when you click it, it expands.
Any help would be really appreciated! Thanks 🙂
.show {
display: none;
}
.hide:focus + .show {
display: inline;
}
.hide:focus {
display: none;
}
.hide:focus ~ #list {
display: none;
list-style-type:none;
}
@media print {
.hide, .show {
display: none;
}
}<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<p>Lorem ipsum...</p>
<div>
<a href="#" class="hide">[Link]</a>
<a href="#" class="show">[Link]</a>
<ol id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</div>
</body>
</html>Solution
Just invert the css:
CSS:
#list, .show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #list { display:block; }
Answered By – Abhitalks
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0