---
url: https://docs.youcan.shop/themes/tags/javascript.md
---

# `javascript`

Generates an HTML `<script>` tag containing the enclosed JavaScript.

```liquid
{% javascript %}
  JS_code
{% endjavascript %}
```

* `JS_code`: The JavaScript you want to run.

It's most useful inside a [section](/themes/sections/overview) or [snippet](/themes/snippets), for the small amount of scripting that depends on the current settings. Anything reusable belongs in the `assets` directory, where it's cached across pages. See [JavaScript and styles](/themes/best-practices/javascript-and-styles).

**Example:**

```liquid
{% javascript %}
  const root = document.getElementById('youcan-section--{{ section.id }}');

  root?.querySelector('[data-toggle]')?.addEventListener('click', () => {
    root.classList.toggle('is-open');
  });
{% endjavascript %}
```

::: tip Output

```html
<script>
  const root = document.getElementById('youcan-section--slideshow');

  root?.querySelector('[data-toggle]')?.addEventListener('click', () => {
    root.classList.toggle('is-open');
  });
</script>
```

:::

> **Note:** Scope your queries to the section's wrapper element rather than the whole document. Two copies of the same section can be on one page, and sections are added and removed while a seller is customizing.