html - Collapsing/Expanding link on click -


i'm stuck folding menu here. managed hands on script want in kind of reverse. in script link "expanded" default. want link contracted default , when click it, expands.

any appreciated! :)

code:

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test</title> <style type="text/css">  .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; } }  </style> </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> 

just invert css:

css:

#list, .show {display: none; } .hide:focus + .show {display: inline; } .hide:focus { display: none; } .hide:focus ~ #list { display:block; } 

Comments

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -