• PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • Request Tutorial
PHP Lift
  • Home
  • Demos
  • PHP Jobs
  • Advertisement
PHP Lift
  • PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • Request Tutorial
  • Follow
    • Facebook
    • Twitter
    • Google+
    • Youtube
    • RSS
Advertisement
Recent Posts
  • 9 Best Programming languages you should learn in 2021
  • 12 Reasons to Choose PHP for Developing Website
  • Create pure CSS based toggle visibility button
  • How to show Image before upload JavaScript & HTML5 FileReader()
  • Create Live Search in HTML table with jQuery
Categories
  • API
  • Bootstrap
  • CSS
  • CSS 3
  • Designing
  • Framework
  • Guide
  • HTML
  • HTML 5
  • JavaScript
  • jQuery
  • MySQL
  • Node.js
  • oAuth
  • Payment
  • PHP
  • Python
  • Social
  • Tips
Weekly Tags
  • PHP
  • How to
  • PHP Basics
  • api
  • Programming Habits
  • HTML5
  • Download
  • css
  • PayPal
  • Payment API
Create pure CSS based toggle visibility button
Home
CSS

Create pure CSS based toggle visibility button

November 16th, 2020 Huzoor Bux CSS, HTML 0 comments

Facebook Twitter Google+ LinkedIn Pinterest

I fount that simple snippet on codepen and it looks super easy and simple, so no need of JavaScript to hide and show objects if we have a super easy and fast CSS method.

DEMO
DOWNLOAD CODE

Here is the HTML for design

<div class="container">
  <div class="row">
    <div class="page-header">
      <h1>CSS toggle visibility</h1>
    </div>
    <input type="checkbox" id="AddReview" name="AddReview" class="helper-trigger"/>
    <div class="col-md-8 helper-show">
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <input type="text" name="name" placeholder="Name" class="form-control"/>
          </div>
        </div>
        <div class="col-md-6">
          <input type="email" name="email" placeholder="Email address" class="form-control"/>
        </div>
      </div>
      <div class="form-group">
        <textarea placeholder="What you say?" rows="6" class="form-control input-lg"></textarea>
      </div>
      <div class="form-group text-right">
        <label for="AddReview" class="btn btn-link"> 
          <u class="text-muted">Cancel</u>
        </label>
        <label for="AddReview" class="btn btn-primary">Add review</label>
      </div>
    </div>
    <label for="AddReview" class="btn btn-default helper-hide">Add review</label>
  </div>
</div>

Above HTML show a form and a button to view a form.

This is the CSS used to hide and show form.

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
.helper-trigger,
.helper-show {
  display: none;
}

.helper-trigger[type="checkbox"]:checked + .helper-show {
  display: block;
}
.helper-trigger[type="checkbox"]:checked + .helper-show + .helper-hide {
  display: none;
}

</style>

Included bootstrap library for form design and below CSS will do the magic.

Hide these classes on runtime .helper-trigger, .helper-show, and Hide and show them on the checked event.

That’s it. I hope you like it; please comment on your feedback.

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)

Related

  • Tags
  • button
  • css
  • toggle
  • visibility
Facebook Twitter Google+ LinkedIn Pinterest
Next article 12 Reasons to Choose PHP for Developing Website
Previous article How to show Image before upload JavaScript & HTML5 FileReader()

Huzoor Bux

I am a PHP Developer

Related Posts

Create Live Search in HTML table with jQuery HTML
October 26th, 2020

Create Live Search in HTML table with jQuery

How to create Full Screen Responsive Image Gallery using CSS and Masonry CSS
October 8th, 2020

How to create Full Screen Responsive Image Gallery using CSS and Masonry

Create HTML5 Fullscreen Static Video Background Using CSS CSS
August 30th, 2020

Create HTML5 Fullscreen Static Video Background Using CSS

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • About
  • Privacy Policy
  • Back to top
© PHPLift 2020. All rights reserved.