ui:toggle

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
Twitter

Toggle size: breakpoints

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

Example

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.
  });
});

Rendered by WebCode

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.

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>

Rendered by WebCode

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>

Rendered by WebCode

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

<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;
  }
  
}