From: Mark Otto <markdotto@gmail.com>
Date: Tue, 23 Dec 2014 12:28:01 +0000 (-0800)
Subject: add some utilities docs for new hidden and show changes
X-Git-Tag: v4.0.0-alpha~459
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=9aa8239f88216875bbc7d571a6343f1508f6b2c0;p=thirdparty%2Fbootstrap.git

add some utilities docs for new hidden and show changes
---

diff --git a/docs/components/helpers.md b/docs/components/helpers.md
index fea487860f..e41b017ee1 100644
--- a/docs/components/helpers.md
+++ b/docs/components/helpers.md
@@ -137,37 +137,22 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes
 }
 {% endhighlight %}
 
-### Showing and hiding content
+### Hidden elements
 
-Force an element to be shown or hidden (**including for screen readers**) with the use of `.show` and `.hidden` classes. These classes use `!important` to avoid specificity conflicts, just like the [quick floats](#helper-floats). They are only available for block level toggling. They can also be used as mixins.
+Hide any HTML element with the `[hidden]` attribute. Previously, v3.x included a `.hidden` class that forced toggled content. However, we removed it due to conflicts with jQuery's `hide()` function. It's taken from [PureCSS](http://purecss.io).
 
-Furthermore, `.invisible` can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document.
+Furthermore, `.invisible` can be used to toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document.
 
 {% highlight html %}
-<div class="show">...</div>
-<div class="hidden">...</div>
+<input type="text" hidden>
 {% endhighlight %}
 
-{% highlight scss %}
-// Classes
-.show {
-  display: block !important;
-}
-.hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-.invisible {
-  visibility: hidden;
-}
+### Visible elements
 
-// Usage as mixins
-.element {
-  .show();
-}
-.another-element {
-  .hidden();
-}
+On the other side of hiding content, you can show content with `.show`.
+
+{% highlight html %}
+<div class="show">...</div>
 {% endhighlight %}
 
 ### Screen readers and keyboard navigation