# Show, Hide and Toggle Alternatives

### What?

Instead of doing `ng-show` and `ng-hide` which simply sets `display:block/none` a `ui-show` and `ui-hide` class will be added which can give you tighter control over how things appear or disappear.

Toggle State: {{!!showHideAn}}

Show Hide Toggle

### Why?

CSS3 transitions of course! Applying a class means you can specify exactly how these two states behave. In addition, the show/hide variants do not enforce css rules when they are false (unless you use toggle), so the default CSS can still apply.

> But can't you just do `ng-class="{ ui-show : someExpression }"`?

... shutup.

In all seriousness, this is just a convenience wrapper for using `ng-class`. This way you can simply swap out instances of ng for ui to immediately get your customized approach.

### How?

    <p><a ng-click="showHide=!showHide">Toggle State: {{!!showHide}}</a></p>
    <div ui-show="showHide">Show</div>
    <div ui-hide="showHide">Hide</div>
    <div ui-toggle="showHide">Toggle</div>

    <style>
    .ui-show {
      color: blue;
      transition: all 0.5s ease; /* You should probably browser-prefix this */
    }
    .ui-hide {
      opacity: 0;
      transition: all 0.5s ease; /* You should probably browser-prefix this */
    }
    </style>

Using `ui-show` or `ui-hide` will add a class of the same name when the expression is true.

Use `ui-toggle` if you want to leverage both classes, as `ui-show` will be added when true and `ui-hide` when false.