# angular.directive.ng:show

Work in Progress This page is currently being revised. It might be incomplete or contain inaccuracies.

## Description

The `ng:show` and `ng:hide` directives show or hide a portion of the DOM tree (HTML) conditionally.

## Usage

    <ANY ng:show="expression">
       ...
    </ANY>

### Parameters

- `expression – {expression} –`

  If the expression is truthy then the element is shown or hidden respectively.

## Example

       Click me: <input type="checkbox" name="checked"><br/>
       Show: <span ng:show="checked">I show up when your checkbox is checked.</span> <br/>
       Hide: <span ng:hide="checked">I hide when your checkbox is checked.</span>

      it('should check ng:show / ng:hide', function(){
        expect(element('.doc-example-live span:first:hidden').count()).toEqual(1);
        expect(element('.doc-example-live span:last:visible').count()).toEqual(1);

        input('checked').check();

        expect(element('.doc-example-live span:first:visible').count()).toEqual(1);
        expect(element('.doc-example-live span:last:hidden').count()).toEqual(1);
      });