---
title: "How to hide Try It! and the Code panel in the API reference"
slug: "how-to-hide-try-it-and-the-code-panel-in-the-api-reference"
description: "Hide the Try It button and Code panel in API reference pages using custom CSS, while keeping Request and Response examples visible."
tags: ["API Reference", "Try It Button"]
updated: 2026-11-06T04:47:23Z
published: 2026-11-06T04:47:23Z
canonical: "docs.document360.com/how-to-hide-try-it-and-the-code-panel-in-the-api-reference"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How to hide Try It! and the Code panel in the API reference

Your published API reference includes [Try It!](https://docs.document360.com/docs/testing-endpoints-with-try-it), an interactive console that lets developers send live requests to your endpoints, and a **Code** panel with ready-to-copy request samples. There is no setting to turn these off, but you can hide them with custom CSS.

               NOTE

              

This is a project-level implementation. It affects **all API documentation workspaces** within the project.

---

## When to use this

Use this customization when you want to:

- Publish your API reference for reading only, without letting developers send live requests from the documentation.
- Prevent accidental requests to endpoints that create, update, or delete data.
- Show a simpler endpoint page for readers who don't need request samples.

---

## Before you begin

- You need access to **Settings** () > **Knowledge base site** > **Site customization** > **Custom CSS & JavaScript** in the Knowledge base portal.
- This is a **project-level** change that affects all API documentation workspaces within the project.
- Hiding Try It! removes the button from your documentation. It does not restrict access to your API. Developers can still send requests with other tools.
- The snippet you need depends on your API reference layout. Open any endpoint page on your knowledge base site:
  - If a **Try It** button appears next to the endpoint URL, you're using the current layout.
  - If **Try It** and **Code samples** appear as tabs in a panel on the right, you're using the earlier layout.

---

## How to hide Try It! and the Code panel

1. Navigate to **Settings** () > **Knowledge base site** > **Site customization** > **Custom CSS & JavaScript** in the Knowledge base portal.
2. In the **CSS** tab, paste the snippet for your layout.

**Current layout**

You can hide the **Try It** button, the **Code** panel, or both:

```
/* Hide the Try It button */
.url-tryit-btn { display: none !important; }

/* Hide the Code panel (the Request and Response panels stay visible) */
.api-docs-v2-docs-view__right > .code-section:first-of-type { display: none !important; }
```

**Earlier layout**

In the earlier layout, **Try It** and **Code samples** share one panel. This snippet hides the whole panel:

```
/* Hide the Try It and Code samples panel */
site-docs-right-panel-container.tryit-section { display: none !important; }
```

1. Click **Save**.

---

## Outcome

**Current layout**

The **Try It** button no longer appears next to the endpoint URL, and the **Code** panel is hidden. The **Request** and **Response** panels stay visible, so readers can still see example payloads.

**Earlier layout**

The right panel with the **Try It** and **Code samples** tabs no longer appears on endpoint pages.

---

## Best practices

- **Hide only what you need.** If readers benefit from request samples but shouldn't send live requests, hide only the **Try It** button and keep the **Code** panel.
- **Test on an endpoint page.** Open an endpoint on your knowledge base site in a private browser window to confirm the result.
- **Recheck after site updates.** The snippets target the API reference's current structure. If your project moves to the current layout, replace the earlier-layout snippet with the current-layout snippet.
- **To revert, delete the snippet.** Navigate back to the **CSS** tab in **Custom CSS & JavaScript**, remove the snippet, and click **Save**. Try It! and the **Code** panel reappear immediately.

## Related

- [How to hide the left navigation bar in the knowledge base pane](/how-to-hide-the-left-navigation-bar-in-knowledge-base-site.md)
- [Custom CSS](/custom-css.md)
- [How to hide the category manager](/how-to-hide-the-category-manager.md)