Improve this Doc View Source

## Overview

Sets the `open` attribute on the element, if the expression inside `ngOpen` is truthy.

A special directive is necessary because we cannot use interpolation inside the `open` attribute. See the interpolation guide for more info.

## A note about browser compatibility

Internet Explorer and Edge do not support the `details` element, it is recommended to use `ngShow` and `ngHide` instead.

## Directive Info

- This directive executes at priority level 100.

## Usage

- as attribute:

      <DETAILS
        ng-open="expression">
      ...
      </DETAILS>

### Arguments

Param | Type | Details
--- | --- | ---
ngOpen | expression | If the expression is truthy, then special attribute "open" will be set on the element

## Example

    <label>Toggle details: <input type="checkbox" ng-model="open"></label><br/>
    <details id="details" ng-open="open">
       <summary>List</summary>
       <ul>
         <li>Apple</li>
         <li>Orange</li>
         <li>Durian</li>
       </ul>
    </details>

    it('should toggle open', function() {
      expect(element(by.id('details')).getAttribute('open')).toBeFalsy();
      element(by.model('open')).click();
      expect(element(by.id('details')).getAttribute('open')).toBeTruthy();
    });