Skip to content

Instantly share code, notes, and snippets.

@Kupodivu

Kupodivu/index.html

Created October 2, 2014 00:06
Show Gist options
  • Save Kupodivu/873eebe07950e1f9a0de to your computer and use it in GitHub Desktop.
Save Kupodivu/873eebe07950e1f9a0de to your computer and use it in GitHub Desktop.
Download ZIP
test togle// source http://jsbin.com/piloka/5
Raw
index.html
<!DOCTYPE html>
<html lang="cs-CZ">
<head>
<meta html-equiv="Content-Type" content="text/html"; charset="utf-8"/>
<link rel="stylesheet" href="nazevsoboru.css" type="text/css" >
<title>test togle</title>
<style id="jsbin-css">
.togle{
width:300px;
list-style:none;
padding:0;
margin:0;
text-align:center;
}
.togle li > label + input{
display:none;
}
.togle li > label{
display:block;
text-transform:uppercase;
color:#ECF2FA;
padding:10px;
background: #242424;
margin: 5px 25px;
border: 2px solid white;
}
.togle li > div{
overflow:hidden;
height:0;
background:#ccc;
margin: 5px 25px;
transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
}
.togle li > label + input:checked + div{
height:200px;
}
</style>
</head>
<body>
<ul class="togle">
<li>
<label for="a1">Kategorie jedna</label><input id="a1" type="radio" name="tog">
<div>obsah kategorie jedna</div>
</li>
<li>
<label for="a2">Kategorie dva</label><input id="a2" type="radio" name="tog">
<div>obsah kategorie dva</div>
</li>
<li>
<label for="a3">Kategorie tri</label><input id="a3" type="radio" name="tog">
<div>obsah kategorie tri</div>
</li>
<li>
<label for="a4">Kategorie ctyri</label><input id="a4" type="radio" name="tog">
<div>obsah kategorie ctyri</div>
</li>
</ul>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html lang="cs-CZ">
<head>
<meta html-equiv="Content-Type" content="text/html"; charset="utf-8"/>
<link rel="stylesheet" href="nazevsoboru.css" type="text/css" >
<title>test togle</title>
</head>
<body>
<ul class="togle">
<li>
<label for="a1">Kategorie jedna</label><input id="a1" type="radio" name="tog">
<div>obsah kategorie jedna</div>
</li>
<li>
<label for="a2">Kategorie dva</label><input id="a2" type="radio" name="tog">
<div>obsah kategorie dva</div>
</li>
<li>
<label for="a3">Kategorie tri</label><input id="a3" type="radio" name="tog">
<div>obsah kategorie tri</div>
</li>
<li>
<label for="a4">Kategorie ctyri</label><input id="a4" type="radio" name="tog">
<div>obsah kategorie ctyri</div>
</li>
</ul>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">.togle{
width:300px;
list-style:none;
padding:0;
margin:0;
text-align:center;
}
.togle li > label + input{
display:none;
}
.togle li > label{
display:block;
text-transform:uppercase;
color:#ECF2FA;
padding:10px;
background: #242424;
margin: 5px 25px;
border: 2px solid white;
}
.togle li > div{
overflow:hidden;
height:0;
background:#ccc;
margin: 5px 25px;
transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
}
.togle li > label + input:checked + div{
height:200px;
}</script>
</body>
</html>
Raw
jsbin.piloka.css
.togle{
width:300px;
list-style:none;
padding:0;
margin:0;
text-align:center;
}
.togle li > label + input{
display:none;
}
.togle li > label{
display:block;
text-transform:uppercase;
color:#ECF2FA;
padding:10px;
background: #242424;
margin: 5px 25px;
border: 2px solid white;
}
.togle li > div{
overflow:hidden;
height:0;
background:#ccc;
margin: 5px 25px;
transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
}
.togle li > label + input:checked + div{
height:200px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment