Tabbed content - Fluid Topics

Fluid Topics supports tabbed content.

Tabbed content syntax generates HTML without specific styling. To style tabbed content, use CSS styling.

Example

To add tabbed content in Markdown, use the following syntax:

=== "Tab 1"
    Markdown **content**.

    Multiple paragraphs.

=== "Tab 2"
    More Markdown `content`.

    - list item *a*
    - list item b

The following code block is an example of CSS styling for tabbed content:

/* Tab content styles */

.tabbed-set {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 1em 0;
  border-radius: 0.1rem;
}

.tabbed-set > input {
  display: none;
}

.tabbed-set label {
  width: auto;
  padding: 0.9375em 1.25em 0.78125em;
  font-weight: 700;
  font-size: 0.84em;
  white-space: nowrap;
  border-bottom: 0.15rem solid transparent;
  border-top-left-radius: 0.1rem;
  border-top-right-radius: 0.1rem;
  cursor: pointer;
  transition: background-color 250ms, color 250ms;
}

.tabbed-set .tabbed-content {
  width: 100%;
  display: none;
  box-shadow: 0 -.05rem #ddd;
}

.tabbed-set input {
  position: absolute;
  opacity: 0;
}

.tabbed-set input:checked:nth-child(n+1) + label {
  color: @tertiary;
  border-color: @tertiary;
}

@media screen {
  .tabbed-set input:nth-child(n+1):checked + label + .tabbed-content {
    order: 99;
    display: block;
  }
}

@media print {
  .tabbed-content {
    display: contents;
  }
}

The resulting tabbed content is the following:

Tab 1

Markdown content.

Multiple paragraphs.

Tab 2

More Markdown content.

list item a
list item b

Tabbed content - Fluid Topics - Latest

Markdown Connector Reference Guide