• EnglishEspañol日本語한국어Português
  • Inicia sesiónComenzar ahora

Collapsers

Collapsers are expandable elements that hide page content until you trigger it open. We use collapsers to hide content in very long documents, out of consideration for our readers. Each collapser has a title (what we show to readers), but also an id that we use for deep "anchor" links to specific collapsers.

Here's an example collapser:

Sugerencia

The keyboard maestro macro for collapsers is kkcollapse.

Here are some examples of when to use collapsers in your document.

Collapsers are useful for...

Example

Long lists

Here are examples when you have a long list of definitions, such as configuration values, API calls, or parameters:

Multiple options

Here's an example when you have multiple options, such as a procedure with steps that vary depending on your application environment: Collecting PMI metrics.

Large code blocks

Here's an example when you have a code block that is longer than about one screen height: Writing API tests.

Subdividing H2s

Here's an example when you want a cleaner substitute for h3 tags when subdividing an h2 header: Installing the PHP agent manually. Unlike an h3, collapsers allow users to see all the options within a section at a glance without having to scroll.

Create a collapser

To create a collapser, you'll need to use our collapser code.

Here's an example of the collapser source:

<CollapserGroup>
<Collapser id="collapser-1" title="Collapser 1">
This is our first example collapser.
</Collapser>
<Collapser id="collapser-2" title="Collapser 2">
This is our second example collapser.
</Collapser>
</CollapserGroup>;

Collapsers triggers

The site automatically opens collapsers in a few scenarios:

  • Arrive at an individual collapser via an anchor ID. For example, go directly to Collapser 1 in the example above.
  • Use CMD+F (or CTRL+F) to find in page and all the collapsers will open automatically.
  • Type the shortcut key s to show (open) all collapsers on the page.
Copyright © 2024 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.