How I can separate the subtabs or (nested tabs) in R markdown and not showing them all side by side?

Question

Hi as mentioned in the question, please, I want to know the code needed to separate the sub tabs in and not showing them all side by side . I tried several code to have two subtabs each one of them contains a different graph and then showing the other two sub tabs below them to show different types of grpahs. also these two tabs will have grapgh for each.

I tried but it keeps showing them all 4 sub tabs side by side and make the report messy and not as expected..

I will provide an example for the code:

## Analysis {.tabset .tabset-fade .tabset-pills}

### 1 {.tabset}

### 2 {.tabset}

### 3 {.tabset}

**A**
#### 3.1
A graph code here to be shown
#### 3.2
A graph code here to be shown

---

**B**
#### 3.3
A graph code here to be shown
#### 3.4
A graph code here to be shown

This is what I want to do enter image description here

and this is what I get enter image description here

I am knitting it as HTML file

Thanks in advance

Answer 1

I was messing with something like this for my own project and the code submitted by @Kat as one of your answers was almost there. I modified to make that last tab (tab 3) have two more sets of nested tabs.

## Analysis {.tabset .tabset-fade .tabset-pills}

### 1 

### 2 

### 3 

#### **A** {.tabset}


##### 3.1
Graph 3.1

##### 3.2
Graph 3.2

#### **B** {.tabset}


##### 3.3
Graph 3.3

##### 3.4
Graph 3.4

Answer 2

You need to 'end' the tabset. You can do this by going up a heading level and using {-}.

Here's an example, using essentially what you've put together. (I used the output html_document with no additional options.)

## Analysis {.tabset .tabset-fade .tabset-pills}

### 1 

### 2

### 3

## {-}

### A {.tabset .tabset-fade .tabset-pills}

#### 3.1 

A graph code here to be shown

```{r p1, echo=FALSE}
plot(x = 1, y = 2)
```

#### 3.2 

A graph code here to be shown

```{r p2, echo=FALSE}
plot(x = 4, y = 10)
```

## {-}

---

### B {.tabset .tabset-fade .tabset-pills}

#### 3.3

A graph code here to be shown

```{r p3, echo=FALSE}
plot(x = 1, y = 10)
```

#### 3.4
A graph code here to be shown

```{r p4, echo=FALSE}
plot(x = 1:100, y = 100:1)
```

In the image, I made it narrow so it wouldn't be to large for SO.

---

---

Update starts here

I'm not entirely sure if I understand your comment, so you'll have to let me know if this clarifies things or if this still isn't what you were looking for, let me know in more detail what you are expecting.

I see that when I created A and B it was at the same heading level as 1, 2, and 3. I'm guessing that this is where the problem lies from your perspective.

I opted to put together a much more robust example of nested tab sets. Because this is all nested, there are no 'stops' needed, either. (BTW, I added number-letter combinations so that you could clearly see that each view presents different content.)

## Analysis {.tabset .tabset-fade .tabset-pills}

### 1

#### 1 A {.tabset .tabset-fade .tabset-pills}

##### 1.1 

```{r p11, echo=FALSE}
plot(x = 1, y = 2)
```

##### 1.2

```{r p12, echo=FALSE}
plot(x = 1, y = 2)
```

### 2

#### 2 A {.tabset .tabset-fade .tabset-pills}

##### 2.1

```{r p21, echo=FALSE}
plot(x = 1, y = 2)
```

##### 2.2

```{r p22, echo=FALSE}
plot(x = 1, y = 2)
```

### 3

#### 3 A {.tabset .tabset-fade .tabset-pills}

##### 3.1 

```{r p1, echo=FALSE}
plot(x = 1, y = 2)
```

##### 3.2 

```{r p2, echo=FALSE}
plot(x = 4, y = 10)
```
----

#### 3 B {.tabset .tabset-fade .tabset-pills}

##### 3.3

```{r p3, echo=FALSE}
plot(x = 1, y = 10)
```

##### 3.4

```{r p4, echo=FALSE}
plot(x = 1:100, y = 100:1)
```