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

> User Interface (GUI)

1 - About

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
Advertising

3 - Toggle size: breakpoints

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

4 - Example

4.1 - Jquery

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>
<br/>
<button id="clickmeslowly">
  Click me and the Ipsum will appear/disappear <b>slowly</b>
</button>
<br/>
<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.
</div>
$( "#clickme" ).click(function() {
  $( "#ipsum" ).toggle();
});
$( "#clickmeslowly" ).click(function() {
  $( "#ipsum" ).toggle( "slow", function() {
    // Animation complete.
  });
});

4.2 - Bootstrap

bootstrap Collpase plugin (based on Jquery)

where:

  • data-toggle is a custom bootstrap data attribute that store the type of widget.
data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"
  • data-target stores the element id to toggle.
Advertising

4.2.1 - Example collapse

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<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.
  </div>
</div>

4.2.2 - 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>
  </a>
  <ul class="dropdown-menu">
	<li>
	  <a href="/users/id" title="Profile">Profile</a>
	</li>
	<li>
	  <a href="/logout" title="Logout">Logout </a>
	</li>
  </ul>
</div>
Related to UI - DropDown

4.3 - 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
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <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>
</ul>
  • 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

Advertising

5 - Documentation / Reference

ui/toggle.txt · Last modified: 2019/03/20 21:46 by gerardnico