• Home
  • PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • Request Tutorial
PHP Lift
  • Home
  • Demos
  • Advertisement
PHP Lift
  • Home
  • PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • Request Tutorial
  • Follow
    • Facebook
    • Twitter
    • Google+
    • Pinterest
    • Youtube
    • Instagram
    • RSS
    Advertisement
    Like us
    Recent Posts
    • How to Extract Text from PDF using PHP
    • 3 reasons why you SHOULD write tests
    • How to create a screen recorder in JavaScript
    • Best 10 Programming Languages that will rule in 2022
    • Top 7 Websites To Get Your First Paid Internship
    Categories
    • API
    • Bootstrap
    • Bot
    • CSS
    • CSS 3
    • Database
    • Designing
    • Framework
    • Guide
    • HTML
    • HTML 5
    • JavaScript
    • jQuery
    • MySQL
    • Node.js
    • oAuth
    • Payment
    • PHP
    • Python
    • Social
    • Tips
    • WordPress
    Weekly Tags
    • PHP
    • How to
    • javascript
    • api
    • MYSQL
    • jQuery
    • PHP Basics
    • Programming Habits
    • HTML5
    • PHP framework
    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

    How to Convert HTML to PDF in PHP with fpdf HTML
    February 28th, 2022

    How to Convert HTML to PDF in PHP with fpdf

    Skeleton Screen Loading Animation using HTML and CSS CSS
    February 7th, 2022

    Skeleton Screen Loading Animation using HTML and CSS

    Convert HTML to PDF in Javascript using jsPDF with Example Download HTML
    August 3rd, 2021

    Convert HTML to PDF in Javascript using jsPDF with Example Download

    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 2021. All rights reserved.