UI - Toggle or Collapse (Display or hide elements) (On/Off)

Card Puncher Data Processing


Display or hide UI components.

The power icon on all electronics, the line though a circle is actually binary, 1 is on, 0 is off. On a toggle switch the “on” side is marked with a | and the “off” side with a O A combined version with | fully superimposed on the O means a single button that toggles on/off

Toggle size: breakpoints

Generally toggle activity, when using a responsive design appears to what is called breakpoints:



Display or hide the matched elements. http://api.jquery.com/toggle/

div, button {
  margin: 0.5rem;
<button id="clickme">
  Click me and the Ipsum will appear/disappear
<button id="clickmeslowly">
  Click me and the Ipsum will appear/disappear <b>slowly</b>
<div id="ipsum" width="100" height="123">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
$( "#clickme" ).click(function() {
  $( "#ipsum" ).toggle();
$( "#clickmeslowly" ).click(function() {
  $( "#ipsum" ).toggle( "slow", function() {
    // Animation complete.


bootstrap Collpase plugin (based on Jquery)


  • data-toggle is a custom bootstrap data attribute that store the type of widget.
  • data-target stores the element id to toggle.

Example collapse

  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
<div class="collapse" id="collapseExample">
  <div class="panel panel-default">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Example dropdown: Menu

<!-- An container element with the class dropdown is needed. 
Without it, the dropdown-menu elements are going all the way down -->
<div class="dropdown">
  <a href="#" data-toggle="dropdown" class="dropdown-toggle">
      <span class="glyphicon glyphicon-user"></span>
      <b class="caret"></b>
  <ul class="dropdown-menu">
	  <a href="/users/id" title="Profile">Profile</a>
	  <a href="/logout" title="Logout">Logout </a>

Related to UI - DropDown

Pure Javascript - Toggle a list

  • The css
/* The element with the toggle class are not shown */
.toggle {
  display: none;

/* The button with the hide id also */
#hide {
   display: none;
  • The Html with:
    • 5 elements in the list
    • and two control buttons respectively Show and Hide
  <li class="toggle" >Fourth</li>
  <li class="toggle" >Fifth</li>
  <li  id="show" onclick="listManager(event, 'show')" >Show</li>
  <li  id="hide" onclick="listManager(event, 'hide')" >Hide</li>
  • The Javascript that is called when clicking on the controls
function listManager(evt, elementId) {
  // Declare all variables
  var i, toggleElements, display;
  if (elementId=='show') {    
      document.getElementById('show').style.display = "none";
      document.getElementById('hide').style.display = "list-item";
      display = "list-item";
  } else {
      document.getElementById('show').style.display = "list-item";
      document.getElementById('hide').style.display = "none";
      display = "none";
  // Get all elements with class="toggle" and hide them
  toggleElements = document.getElementsByClassName("toggle");
  for (i = 0; i < toggleElements.length; i++) {
    toggleElements[i].style.display = display;
  • A Click on the Show Link will show the last 2 elements and the Hide link
  • A Click on the Hide Link will hide the last 2 elements

Finite Automaton

A ''on/off' button modeled as a finite automaton.

On Off Automaton

It has only two states.

Documentation / Reference

Discover More
Word Recognition Automaton
Automata - Finite Automata

A finite automaton is an automaton that has a set of states and its control moves from state to state in response to external inputs. It has a start and an end state and there are only a finite number...
Bootstrap - Navbar

in Bootstrap In Bootstrap 4, the Navbar is responsive by default and utilizes flexbox to make alignment of Navbar content much easier. The navbar-header class has been removed from Bootstrap 4, and the...
Bootstrap - Tab

tab in Bootstrap are composed of: two HTML elements: the triggers element: the navigational tab that are clicked the target element: the pane that contains the content a javascript object instance...
CSS - Responsive (Breakpoint)

responsiveness in CSS An element that defined the width: as percentage or fix with a max-width property in percentage generally equal or below 100% Example: Bootstrap use media queries to create...
Class Html Beauty Blue Added
DOM - Class attribute

manipulation in the DOM. API The DOM Web API has a special function to select on class: the getElementsByClassName() function one You can select the class with a selector With Native Javascript...
Html Checkbox Illustration
How to create and use a HTML checkbox ?

This article gives you all the important information about HTML checkbox and how to use them
Card Puncher Data Processing
UI - DropDown

The login element in Bootstrap: where:
Card Puncher Data Processing
UI - Navbar (Horizontal Menu|Navigation Header)

Navbars are responsive component (menu) that serve as navigation headers. The icon that we show in the mobile view when the navigation bar is collapsed is called an hamburger icon.
Web UI - Element Visibility (display:none vs visibility:hidden)

To hide an element in CSS, you may use: the display property to none or the visibility property to hidden The difference is that: with the display:none option, you will not see any blank space...
Web UI - Popper library (tooltip and popover positioning)

popper is a positional library that position tooltips and popovers popper is now floating-ui It also makes sure that the positioned element never end up off screen or cropped by an overflow. (Resizing...

Share this page:
Follow us:
Task Runner