Using the label
A Pen by A Non Ymous on CodePen.
Using the label
A Pen by A Non Ymous on CodePen.
<p>Header.</p> | |
<div class="container"> | |
<label for="toggle1">IT | SAMPLE NO ONE</label> | |
<input type="checkbox" id="toggle1" class="toggleBox" /> | |
<p class="bkg"> | |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore <br /> | |
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br /> | |
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, <br /> | |
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, <br /> | |
sed diam voluptua. | |
</p> | |
</div> | |
<div class="container"> | |
<label for="toggle2">CSS3-HOWTO | USING CHECKBOXES FOR NON-JS CLICK EVENTS</label> | |
<input type="checkbox" id="toggle2" class="toggleBox" /> | |
<p class="bkg"> | |
1) Include the upper CSS into your html email. Do not load it from an external source <br /> | |
2) Copy the div.container for each point to be created. <br /> | |
3) Make sure that the toggle #IDs in each div.container are different! <br /> | |
4) Put the headline inside of the label tag. <br /> | |
5) Put the text inside of the p tag. <br /> | |
</p> | |
</div> | |
<p>MFG Matthias</p> | |
<p>Footer.</p> |
div { | |
margin: 10px; | |
width: 90%px; | |
overflow: hidden; | |
position: relative; | |
border-left: 4px solid #00AAEE; | |
} | |
label { | |
display: block; | |
height: 18px; | |
width: 500px; | |
background: #00AAEE; | |
padding-top: 2px; | |
padding-left: 5px; | |
text-align: left; | |
font: 12px Helvetica, Verdana, sans-serif; | |
font-weight: bolder; | |
color:white; | |
margin-bottom: 10px; | |
} | |
label:hover { | |
background: #232323; | |
color: #fff; | |
cursor: pointer; | |
} | |
input.toggleBox { | |
position: absolute; | |
top: -9999px; | |
left: -9999px; | |
} | |
.bkg { | |
position: relative; | |
top: 0px; | |
left: 0; | |
height: 0px; | |
margin-left: 5px; | |
/*z-index: -100;*/ | |
/*opacity: 100;*/ | |
/*display:none;*/ | |
opacity: 0; | |
} | |
.bkg { | |
-webkit-transition: opacity 1s ease; | |
-moz-transition: opacity 1s ease; | |
-o-transition: opacity 1s ease; | |
-ms-transition: opacity 1s ease; | |
transition: opacity 1s ease; | |
} | |
input.toggleBox:checked + p { | |
opacity: 100; | |
display:block; | |
height: auto; | |
} |