> For the complete documentation index, see [llms.txt](https://jscula.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jscula.gitbook.io/docs/events/.toggleaction.md).

# .toggleAction()

The <mark style="color:purple;">`toggleAction()`</mark> is a **J**scula method that alternates between two given functions of actions.

This method takes up to callbacks, your `initial Action` and the `reverse Action`

```javascript
toggleAction(initialAction, reverseAction);
```

This is an example of the `toggleAction` method switches between two actions for all the elements with the `.cont` class inside a `.wrapper`. One action expands the element to show its full `<p>` content, while the other shrinks it back to 18 pixels height.

{% code lineNumbers="true" %}

```javascript
$('.wrapper .cont*').toggleAction(function(e){
    this.height(this.find('p').height() + 18);
},
function(e) {
    this.height(18);
);
```

{% endcode %}

<mark style="background-color:orange;">NOTE:</mark>

The 'this' keyword refers to the selected element.

* The 'this' keyword can only refer to the selected element if the *<mark style="color:purple;">`function`</mark>* keyword is used.
* The 'this' keyword *`does not`* work with *`arrow functions`*

### Use cases

Use `toggleAction()` to:

* Alternate an expandable section between collapsed and expanded states.
* Switch a card between compact and detailed views.
* Revert a repeated interaction without tracking separate state.

### More examples

Toggle a panel between a compact and expanded height:

```javascript
$('.details-panel*').toggleAction(
  function() {
    this.height(240);
  },
  function() {
    this.height(48);
  }
);
```

Toggle each card between summary and full-content height:

```javascript
$('.article-card*').toggleAction(
  function() {
    this.height(this.find('.content').height());
  },
  function() {
    this.height(96);
  }
);
```