xaringanExtra::use_panelset()
xaringanExtra::style_panelset_tabs(font_family = "inherit")

Panels in R Markdown!

Similar to R Markdown’s tabset feature but it works just about anywhere that R Markdown generates HTML.

It has fewer options, but it’s accessible and linkable! Once the panelset has focus, you can move between tabs with the arrow keys, or use the Tab key to “hover” over a panelset before opening. The page’s URL changes to reflect the current panel selection, so you can share a link and know that the recipient’s page will open to the correct tab.

Tab One

Sit duis varius cursus auctor sed primis dictum justo diam senectus tellus? Facilisi turpis etiam facilisis mi class ullamcorper curae donec tempus? Felis habitasse id mus placerat blandit nec feugiat litora ridiculus sociis? Nostra varius morbi metus per mollis!

Ipsum natoque mattis posuere malesuada et. Etiam urna ac parturient penatibus magnis nunc taciti hac vestibulum tortor lobortis phasellus inceptos. Nullam mauris eleifend sem orci sodales nunc etiam nostra conubia fermentum. Mi metus commodo ullamcorper nostra est nunc aliquet curabitur.

Tab Two

Sub Heading One

Consectetur tortor torquent nisl ante diam risus diam. Gravida purus sociis pulvinar elementum tellus ultrices suscipit! Ad turpis augue mattis netus fusce vulputate posuere fames sed cum. Auctor dignissim felis maecenas mauris aenean mauris primis cursus sollicitudin pulvinar donec.

Sub Heading Two

Ipsum eu commodo senectus nam risus penatibus nisi in morbi non? Congue dictum primis hendrerit pretium odio cubilia proin diam pretium posuere. Mauris aliquet quis eleifend mollis cursus convallis pharetra accumsan porttitor leo mattis. Dictum euismod praesent egestas non facilisi.

Tab Three

Lorem cubilia phasellus enim himenaeos morbi conubia duis nec pretium cubilia pharetra mus sociosqu primis.

Elit euismod volutpat penatibus quisque phasellus viverra!

Tabset/Panelset

This works a lot like .tabset, just add the {.panelset} class to a parent header and all sub headings one level below become tabs!

## Panels in R Markdown! {.panelset}

### Tab One

content...

### Tab Two

#### Sub heading one

content...

### Tab Three

content...

Note that nested panelsets aren’t supported (yet!).

More Panels

Tab A

Sit mi magnis conubia posuere vestibulum suscipit nunc! Quisque nam senectus semper purus ad faucibus aenean dis volutpat nulla. Luctus cras auctor donec nisl nec cursus enim feugiat turpis. Potenti bibendum elementum fringilla quam class leo aliquet suscipit natoque!

Tab B

Sub heading B1

Ipsum fermentum volutpat potenti fermentum eros aptent ornare phasellus eros dignissim accumsan! Suscipit aptent orci felis sodales facilisi taciti mus velit lobortis turpis vitae erat ultrices auctor. Primis praesent habitasse quis litora curae orci ante mi imperdiet montes enim et? Dui feugiat mi etiam semper nec donec tempus semper?

Sub heading B2

Amet sociis ac ad himenaeos felis porttitor quis dui dapibus! Auctor interdum dui senectus morbi lobortis pharetra eleifend. Commodo posuere erat laoreet platea ligula a praesent urna congue tempor dignissim porta vestibulum.

Tab C

Ipsum nascetur duis senectus praesent at mauris vehicula ligula primis auctor. Dignissim imperdiet dapibus sagittis condimentum aliquam tortor. Ac sapien malesuada dictumst eros per lacinia hendrerit hendrerit facilisis ornare class. Tellus nisi molestie per potenti ac justo orci aliquet sem elementum.

Non-Standard Rmd

::::: {.panelset}

::: {.panel}

[Tab A]{.panel-name}

Sit mi magnis conubia posuere...

:::

::: {.panel}

[Tab B]{.panel-name}

### Sub heading one

Ipsum fermentum volutpat potenti...

:::

::: {.panel}

[Tab C]{.panel-name}

Ipsum nascetur duis senectus praesent...

:::

HTML

Worst case scenario: if none of the other formats work, you can fall back to raw HTML.

<div class="panelset">
  <div class="panel">
    <div class="panel-name">First Tab</div>
    <!-- Panel content -->
    <p>Lorem ipsum, etc, etc</p>
  </div>
  <div class="panel">
    <div class="panel-name">Second Tab</div>
    <!-- Panel content -->
    <p>Lorem ipsum, etc, etc</p>
  </div>
</div>

Sideways Panels

First

Elit netus sociosqu purus massa semper in magna inceptos proin diam tristique laoreet interdum imperdiet conubia. Aliquam aenean suspendisse faucibus nostra nam habitant facilisi habitant tristique. Senectus natoque id.

Second

Lorem dictumst orci nulla senectus nunc venenatis ante purus habitant taciti. Platea facilisi faucibus interdum nisi faucibus gravida at nascetur.

Adipiscing nascetur viverra urna vitae sociis morbi purus taciti aptent metus. Nibh cubilia habitasse penatibus in est condimentum faucibus nunc ullamcorper placerat vel?

Third

Lorem tristique montes sem cursus laoreet metus! Facilisis ullamcorper donec potenti torquent nam quisque lectus vel facilisis. Montes ante mus curae lacinia.

Lorem tristique iaculis metus nibh sem nisi eleifend accumsan fusce est. Sollicitudin libero cras iaculis proin cursus phasellus sem diam dignissim aptent lacus. Na lacus.

Consectetur tincidunt eu sem cursus ullamcorper ullamcorper condimentum cum porttitor. Ligula gravida ligula augue vel suscipit odio mi? Natoque tincidunt nibh etiam est scelerisque himenaeos quis posuere conubia.

Elit taciti turpis molestie dui massa orci porttitor odio facilisi? A vel semper molestie euismod tincidunt nibh suspendisse. Egestas augue praesent himenaeos mus lacinia fames faucibus accumsan litora vulputate commodo.

Lorem tristique montes sem cursus laoreet metus! Facilisis ullamcorper donec potenti torquent nam quisque lectus vel facilisis. Montes ante mus curae lacinia.

Lorem tristique iaculis metus nibh sem nisi eleifend accumsan fusce est. Sollicitudin libero cras iaculis proin cursus phasellus sem diam dignissim aptent lacus. Na lacus.

Consectetur tincidunt eu sem cursus ullamcorper ullamcorper condimentum cum porttitor. Ligula gravida ligula augue vel suscipit odio mi? Natoque tincidunt nibh etiam est scelerisque himenaeos quis posuere conubia.

Elit taciti turpis molestie dui massa orci porttitor odio facilisi? A vel semper molestie euismod tincidunt nibh suspendisse. Egestas augue praesent himenaeos mus lacinia fames faucibus accumsan litora vulputate commodo.

Lorem tristique montes sem cursus laoreet metus! Facilisis ullamcorper donec potenti torquent nam quisque lectus vel facilisis. Montes ante mus curae lacinia.

Lorem tristique iaculis metus nibh sem nisi eleifend accumsan fusce est. Sollicitudin libero cras iaculis proin cursus phasellus sem diam dignissim aptent lacus. Na lacus.

Consectetur tincidunt eu sem cursus ullamcorper ullamcorper condimentum cum porttitor. Ligula gravida ligula augue vel suscipit odio mi? Natoque tincidunt nibh etiam est scelerisque himenaeos quis posuere conubia.

Elit taciti turpis molestie dui massa orci porttitor odio facilisi? A vel semper molestie euismod tincidunt nibh suspendisse. Egestas augue praesent himenaeos mus lacinia fames faucibus accumsan litora vulputate commodo.

Right Sideways Panels

First

Elit netus sociosqu purus massa semper in magna inceptos proin diam tristique laoreet interdum imperdiet conubia. Aliquam aenean suspendisse faucibus nostra nam habitant facilisi habitant tristique. Senectus natoque id.

Second

Lorem dictumst orci nulla senectus nunc venenatis ante purus habitant taciti. Platea facilisi faucibus interdum nisi faucibus gravida at nascetur.

Adipiscing nascetur viverra urna vitae sociis morbi purus taciti aptent metus. Nibh cubilia habitasse penatibus in est condimentum faucibus nunc ullamcorper placerat vel?

Third

Lorem tristique montes sem cursus laoreet metus! Facilisis ullamcorper donec potenti torquent nam quisque lectus vel facilisis. Montes ante mus curae lacinia.

Lorem tristique iaculis metus nibh sem nisi eleifend accumsan fusce est. Sollicitudin libero cras iaculis proin cursus phasellus sem diam dignissim aptent lacus. Na lacus.

Consectetur tincidunt eu sem cursus ullamcorper ullamcorper condimentum cum porttitor. Ligula gravida ligula augue vel suscipit odio mi? Natoque tincidunt nibh etiam est scelerisque himenaeos quis posuere conubia.

Elit taciti turpis molestie dui massa orci porttitor odio facilisi? A vel semper molestie euismod tincidunt nibh suspendisse. Egestas augue praesent himenaeos mus lacinia fames faucibus accumsan litora vulputate commodo.