The purpose of this page is to show a sample of HTML/CSS code.
Open individual toggle buttons using only HTML and CSS
Challenge
While creating a website, I wanted an HTML only toggle button. I found a few examples of code on Codepin and other sites, but most requires the use of jQuery. That's fine but most of the jQuery solutions are not mobile-friendly.
Example of jQuery from Bootstrap
$('.dropdown-toggle').dropdown()Solution: Code Examples
Visual Example 1
Code Example 1
CSS
.causecontainer div[class*="message"] {
margin: -22px 0 13px 0;
background:#181818;
color:#FFF;
padding: 20px;
overflow: hidden;
box-sizing: border-box;
display: none;
}
div[class*="message"] h1 a, div[class*="message"] h2 a, div[class*="message"] h3 a, div[class*="message"] a {
color: #fff !important;
}
[id*="toggle1"] {
visibility: hidden;
appearance:none;
cursor:pointer;
left:-100%;
top:-100%;
}
[id*="toggle1"] + label {
cursor:pointer;
color: #FFF;
line-height:20px;
font-size:12px;
text-align: left;
-webkit-font-smoothing: antialiased;
cursor: pointer;
margin:20px 50px;
transition:all 500ms ease;
}
[id*="toggle1"] + label div {
background: #26ae90;
padding: 8px 10px;
transition:all 500ms ease;
border-radius: 3px;
}
[id*="toggle1"] + label div:after {
content:"Open";
text-align: right;
float: right;
color: #2B0B46;
font-weight: bold;
padding: 0px 25px 0px 0px;
}
[id*="toggle1"]:checked + label div:after {
content:"Close";
text-align: right;
float: right;
color: rgba(255, 0, 0, 0.72);
font-weight: bold;
padding: 0px 25px 0px 0px;
}
[id*='toggle'] .container, [class*='toggle'] .container {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
padding:5em 3em;
}
[id*="toggle1"]:checked ~ .message {
display: block;
}
[id*="toggle1"]:checked ~ .container {
display: none;
}
[id*="toggle1"]:checked + label {
background:#dd6149;
}
.causecontainer {
padding: 0px !important;
margin: -34px 0 -20px 0 !important;
position: relative;
overflow: hidden;
}
HTML
Note in the code that the class clearfix is used in a div before and after the toggle buttons because of the margin correction. This could be improved. Also everytime you create a new toggle button, anything named toggle needs to be unique (ie. for="toggle6" name="toggle6" id="toggle6").
<H2>Header</h2> <div class="clearfix"> </div> <div class="causecontainer"> <input type="checkbox" name="toggle6" id="toggle6" /> <label for="toggle6"><div>Click me 1</div></label> <div class="message"> <h1>Add a message</h1> <p></p> </div> </div> <div class="causecontainer"> <input type="checkbox" name="toggle9" id="toggle9" /> <label for="toggle9"><div>Click me 2</div></label> <div class="message"> <h1>Add a message</h1> <p></p> </div> </div> <div class="clearfix"> </div>
Visual Example 2
Add a message
Code Example 2
CSS
.toggle-wrapper {
position: relative;
overflow: hidden;
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}
.toggle-wrapper div[class*="toggle-inside"] {
/* margin: -22px 0 13px 0;*/
overflow: hidden;
box-sizing: border-box;
display: none;
}
.container {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
padding:5em 3em;
}
[id*="toggle"] {
visibility: hidden;
appearance:none;
cursor:pointer;
left:-100%;
top:-100%;
}
[id*="toggle"] + label {
cursor:pointer;
text-align: left;
-webkit-font-smoothing: antialiased;
cursor: pointer;
margin:20px 50px;
transition:all 500ms ease;
}
[id*="toggle"] + label div {
transition:all 500ms ease;
}
[id*="toggle"] + label div:after {
content:"Open";
text-align: right;
float: right;
}
[id*="toggle"]:checked + label div:after {
content:"Close";
text-align: right;
float: right;
}
[id*="toggle"]:checked ~ .toggle-inside {
display: block;
}
[id*="toggle"]:checked ~ .container {
display: none;
}
HTML
<div class="toggle-wrapper"> <input type="checkbox" name="toggleEXAMPLE" id="toggleEXAMPLE" /> <label for="toggleEXAMPLE"><div>Click me 2</div></label> <div class="toggle-inside"> <h1>Add a message</h1> <p></p> </div> </div> <div class="clearfix"> </div>
No comments:
Post a Comment