CSS-Checkbox-Toggle-2.markdown

CSS Checkbox Toggle 2

Using the label

A Pen by A Non Ymous on CodePen.

License.

index.html

    <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>

style.css

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;
}