Create Tabsets from HTML Sections or Bullet Lists via JavaScript and CSS | /en/2023/10/section-tabsets/

[giscus[bot]]

Create Tabsets from HTML Sections or Bullet Lists via JavaScript and CSS

As I wrote last month, code folding was the most requested feature in blogdown, of which I have given an implementation. Today I will demonstrate an implementation of another top requested feature: …

https://yihui.org/en/2023/10/section-tabsets/

[sfjiang01]

Hey Yihui, I gave the bullet point method for the tabset a shot as per your documentation, but I'm struggling to get it to work. I've searched around on the internet for others using this approach, but no luck. Could you provide a more detailed guide on how to implement it? Thanks a bunch!

[yihui]

Hi, what exactly did you try? I can't think a better way to give instructions than this post. Basically you only need two things: first include the js/css, and second, write Markdown.

[sfjiang01]

Thanks so much for the reply. Ya I just did what you were suggesting in the document - the first one is a screen shot from my r studio and the second one is the output - doenst seem like the tabset is working

[yihui]

Please provide the full source example, instead of screenshots.

[sfjiang01]

Thanks Yihui so much for the reply, below is the code along with the output screenshot (sorry it doesnt allow me to attach html file) and thanks again for the help!

---
title: "test"
output: html_document
date: "2024-03-16"
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

## Tabbed Section - Method I {.tabset .tabset-fade}

### Table 
```{r cars, echo=FALSE}
summary(cars)
```

### Plot

You can also embed plots, for example:

```{r pressure, echo=FALSE}
plot(pressure)
```


## Tabbed Section - Method II

<script src="https://cdn.jsdelivr.net/npm/@xiee/utils/js/tabsets.min.js" defer></script>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xiee/utils/css/tabsets.min.css">



<div class="tabset"></div>

- Tab one

  Content

- Tab two

  Content

  <div class="tabset"></div>

    - Child tab one

      Content

    - Child tab two

      Content

- Tab three

[yihui]

Thanks! That's much better than screenshots. Truth only exists in source code.

The short answer is that you have to either move the <script> to the end of your document (at least after the bullet list), or add an attribute data-external to it, e.g.,

<script src="https://cdn.jsdelivr.net/npm/@xiee/utils/js/tabsets.min.js" defer data-external="1"></script>

I don't have time to explain the underlying reason. Basically you need to make the JS execute after the bullet list has been loaded on the page.

BTW, I wouldn't recommend using both R Markdown's built-in tabsets and my tabset solution in the same document. You'd better choose only one method.