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

  


Enrico      Commented   1 year ago Reply

I'm trying to study your interesting example but I can not configure the server section (SLIM). In WAMP I created a PhpSlimAuth folder and unzipped the PHPSlimRestServer.zip file. The path is c:\wamp\www\ PhpSlimAuth and to test the server use http://localhost/PhpSlimAuth/public/user but I get the error Fatal error: Interface 'Interop \ Container \ ContainerInterface' not found in C: \ wamp \ www \ PhpSlimAuth \ vendor \ slim \ slim \ Slim \ Container.php online 46 You can help me understand where is the error ?

Greg Bayes      Replied   1 year agoReply


Hi thanks for your interest in this. I will look into why this is not working and will establish which blog you are referring to and try to adjust this to the correct blog if it is possible.

Greg Bayes      Replied   1 year agoReply


Hi thanks for your interest in this. I will look into why this is not working and will establish which blog you are referring to and try to adjust this to the correct blog if it is possible.

Enrico      Commented   1 year ago Reply

Sorry I put my question in not correct article !!!

Hi Enrico      Replied   1 year agoReply


I will reallocate this to the correct blog. I will test this on my rest server to see if I get the same issue than I will try and trouble shoot your problem.

Greg Bayes      Replied    Moderator   1 year agoReply


Hi Enrico I see that a link had broken in Slim 3. I updated Slim 3 in github and deleted test code line in JWT.php. All works now. The public Index.php on load should show "Page not Found". Once this is working then you will be able to make local rest calls to the WAMP server. I hope this solves the issue. Regards Greg

Enrico      Commented   7 months ago Reply

I Greg I returned !!! I can't running your exemple ... I created a PhpSlimAuth in my wamp dir : C:\wamp\www\PhpSlimAuth I unzipped your PHPSlimRestServer dir in PhpSlimAuth dir the tree is : Directory di C:\wamp\www\PhpSlimAuth > middleware > public > routes > vendor In public dir there isn't .htaccess file is normal ??? In pas source I altered your http.Get('http://private.localhost/htdoc/PhpSlimAuth/public/user') in http.Get('http://localhost/PhpSlimAuth/public/user') to fit your example path Your VCL Example (Client CRUD INDY Authentication ) return me 404 error If I put in public dir a basic .htaccess ( RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(.*)$ index.php [QSA,L] ) and I activate the SLIM debugger I have this error : Fatal error: Uncaught exception 'BadMethodCallException' with message 'Method config is not a valid method' in C:\wamp\www\PhpSlimAuth\vendor\slim\slim\Slim\App.php on line 126 ( ! ) BadMethodCallException: Method config is not a valid method in C:\wamp\www\PhpSlimAuth\vendor\slim\slim\Slim\App.php on line 126 Can You provide me a running SLIM / EXAMPLE dir for testing you very interesting example ? Thanks in advance Enirco

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