Wednesday, May 25, 2016

HTML/CSS Toggle Button (No need for jQuery)

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

 

Add a message

Add a message

 

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">&nbsp;</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">&nbsp;</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">&nbsp;</div>
My Photo
Senior UI/UX web designer. Adventurist and certified Yoga / Barre Instructor. Love aviation, books, and travel. More: References About

No comments: