Bayesean Blog - Desktop, Mobile and IOT Developer Blog


CSS to create a functional Toggle Button

Posted on 16th Dec 2016 in Bootstrap 4, CSS


Creating a Toggle Button using only CSS

Togglebutton.gif

This is an update of the initial blog which now built using bootstrap 4’s  bootstrapmin.css.  Originally I required a toggle button that would show / Hide detail on activating a button without the use of using JavaScript code. The result is a lightweight purely CSS driven object.

Difficulty Level : Easy

A css file is created to perform the heavy work and a html form with a CSS created button that ‘Shows’ or ‘Hides’ script within a DIV.

We create two files. The first is index.html which holds all the visual code and a toggle.css file which is where all the work is done. In the toggle.css file, the newly created class focus sets the background of the area within the div which will allow the area to be hidden or shown. This is what the html file will use in a div to show and hide the toggle button.

Here is a snippet of the focus class created in the toggle.css file…

 

.focus {
overflow:hidden;
background: #E9F7FA;
margin-top :30px;
}

.focus > div {
-webkit-transition: all 0.2s ease;
-moz-transition: margin 0.2s ease;
-o-transition: all 0.2s ease;
transition: margin 0.2s ease;
}

In order to continue to use the standard bootstrap buttons in other areas of the website, a dedicated button is created. The basic Hover and Active visual feel is created to ensure that the button functions similar to the bootstrap buttons and has the same look and feel.

/* Change how it looks when hovered or clicked */
.btn-extend:hover {
    background-color: #AAD83A;
    border-color: #E9E7E7;
    color: #5D5D5D;
}

.btn-extend:active {
    background-color: #95D14E;
    border-color: #FFFFFF;
    color: #020202;
}

 

This is where the magic  is actioned.  We use a On key press to action the ‘show info’ or ‘hide info’ process.

 

.btn-extend[value="Show Info"] + .focus > div {
margin-top:-100%;
}

.btn-extend[value="Hide Info"] + .focus {
padding:5px;
}

/*This hides the  transition effects*/
.btn-extend {
display:block
;margin:5px 0;
}

 

In the index.html we call the New Button by calling the class="btn btn-extend" then the input we use the CSS created actions:-

value="Show Info" onclick="this.value=this.value=='Show Info'?'Hide Info':'Show Info';"’ see below script that is implemented in the html file.

          <h4>  HTML and CSS only </h4>
          <hr>
          <input class="btn btn-extend" type="button" value="Show Info"                   onclick="this.value=this.value=='Show Info'?'Hide Info':'Show Info';">
       
//Calling the focus class to call the CSS  ‘.focus’ code  
   <div class="focus">
            <hr>
            <div>
              <p class = "text-center">Place information or items to show / hide</p>
              <hr>
            </div>
          </div>
        </div>
      </body>

 Feel free to download the updated code from the Github repository.

 

Download Code

Happy Coding

  


Be the First to Comment...

Add a Comment

9+5

Recent News

Delphi Delimited String to Fields
Delphi A Professional VCL DBGrid Part Four
Delphi A Professional VCL DBGrid Part Three
Delphi A Professional VCL DBGrid Part Two
Delphi A Professional VCL DBGrid Part One
Delphi VCL Buttons in DBGrid
Two Helper Apps for Delphi LibUSB
Delphi Libusb Library Introduction

Categories

Bootstrap 4
Delphi VCL
Delphi FMX
Ajax
Bootstrap 3
CSS
XE4>Delphi > XE4
Delphi < XE4
PHP

Archives

August 2019

Delphi Delimited String to Fields

June 2019

Delphi A Professional VCL DBGrid Part Four

May 2019

Delphi A Professional VCL DBGrid Part Three

April 2019

Delphi A Professional VCL DBGrid Part Two

March 2019

Delphi A Professional VCL DBGrid Part One

November 2018

Delphi VCL Buttons in DBGrid

October 2018

Two Helper Apps for Delphi LibUSB

September 2018

Delphi Libusb Library Introduction

August 2018

Delphi Object directly to a Json string in a REST Client
Delphi using Environment Variables in your App

July 2018

Delphi FMX Leaflet Plotter using OSM Maps

June 2018

C2PAS32 Convertor Application
C to Delphi Open Source Convertors Shootout
Delphi command-line programs with DOSCommand

May 2018

Delphi PDF Embedded viewer with PDF.js

March 2018

Delphi FMX - Changing TCharacter to TCharHelper
Make Your Delphi App POP using Javascript!

January 2018

Delphi FMX Dashboard using Chart.JS
Delphi FMX Form Docking

December 2017

PHP Slim REST Server & Delphi Auth Part 5

November 2017

Delphi FMX REST Client App Part 4

October 2017

Delphi VCL REST Pricing Client App Part 3

September 2017

Delphi REST VCL Client Basic Auth Part 2B

August 2017

Delphi REST Client Part 2A
PHP PDO REST Server Part 1

July 2017

PHP REST Server and Delphi Client Intro

June 2017

Delphi SQLite Encryptor-Decryptor Tool
Updating Applications Manifest using Delphi

May 2017

Create a Visual IP Address Geolocation with PHP

March 2017

PHP Downloader using Countdown timer
PHP File Downloader from a Inbox Selection

February 2017

Javascript Image-File Uploader with ThumbViewer

January 2017

Morris Charts and PHP-PDO

December 2016

CSS to create a functional Toggle Button