Feature Request: Dropdown Options in Tabsets

[bschneidr]

For tabsets created in an HTML document by rmarkdown, tabs are by default displayed horizontally, like so:

However, with a little bit of tweaking of the HTML, you can turn the tabset into a dropdown menu:

Instead of having to tweak the HTML after Pandoc produces the HTML file, would it be possible to use rmarkdown to specify a dropdown layout? Perhaps the result could look something like this?

# Choose a Tab {.tabset .tabset-fade .tabset-dropdown}
## First Tab
Here is the first tab's content.
## Second Tab
Here is the second tab's content

For reference, the rmarkdown for this example is as follows:

---
title: "Tabset Example"
output: html_document
---

# The Tabset Section {.tabset .tabset-fade}

## First Tab
Here is the first tab's content.

## Second Tab
Here is the second tab's content

And the HTML produced for the tabset is this:

<ul class="nav nav-tabs" role="tablist">
	<li role="presentation" class="active">
		<a role="tab" data-toggle="tab" href="#first-tab" aria-controls="first-tab">First Tab</a>
	</li>
	<li role="presentation">
		<a role="tab" data-toggle="tab" href="#second-tab" aria-controls="second-tab">Second Tab</a>
	</li>
</ul>

which can be replaced by the following HTML to produce a dropdown menu:

 <ul class="nav nav-tabs" role="tablist">
	 <li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
		  Choose a Tab <span class="caret"></span>
		</a>
		<ul class="dropdown-menu">
		  <li class=""><a href="#first-tab" data-toggle="tab" aria-expanded="false" aria-controls="first-tab">First Tab</a></li>
		  <li class=""><a href="#second-tab" data-toggle="tab" aria-expanded="false" aria-controls="second-tab">Second Tab</a></li>
		</ul>
	 </li>
</ul>

[stefanfritsch]

Hi,

I wrote a bit of css/js that allows you to do that.

You only have to add the source file to the header of your document (adjust the path if tabset-dropdown.html is not in the same directory as the .rmd):

...
output:
  html_document:
    includes:
      after_body: tabset-dropdown.html
...

And add the class .tabset-dropdown to the relevant section:

# Everything below this should be a dropdown {.tabset .tabset-dropdown}

## first item

## second item

## ...

The tabset-dropdown.html:

<style>
/* Notwendiges Zeug für Dropdowns */
.tabset-dropdown > .nav-tabs {
	display: inline-block;
	max-height: 500px;
	min-height: 44px;
	overflow-y: auto;
	background: white;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.tabset-dropdown > .nav-tabs > li.active:before {
    content: "";
    font-family: 'Glyphicons Halflings';
    display: inline-block;
    padding: 10px;
    border-right: 1px solid #ddd;
}

.tabset-dropdown > .nav-tabs.nav-tabs-open > li.active:before {
	content: "&#xe258;";
	border: none;
}

.tabset-dropdown > .nav-tabs.nav-tabs-open:before {
	content: "";
    font-family: 'Glyphicons Halflings';
    display: inline-block;
    padding: 10px;
    border-right: 1px solid #ddd;
}


.tabset-dropdown > .nav-tabs > li.active {
	display: block;
}

.tabset-dropdown > .nav-tabs > li > a,
.tabset-dropdown > .nav-tabs > li > a:focus,
.tabset-dropdown > .nav-tabs > li > a:hover {
	border: none;
	display: inline-block;
	border-radius: 4px;
}

.tabset-dropdown > .nav-tabs.nav-tabs-open > li {
	display: block;
	float: none;
}

.tabset-dropdown > .nav-tabs > li {
	display: none;
}
</style>

<script>
$(document).ready(function () {
	$('.tabset-dropdown > .nav-tabs > li').click(function () {
		$(this).parent().toggleClass('nav-tabs-open')
	});
}); 
</script>

And a minimum working example .rmd:

---
title: "Untitled"
output:
  html_document:
    toc: true
    toc_float: true
    code_folding: hide
    number_sections: true
    includes:
      after_body: tabset-dropdown.html
---

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

# R Markdown {.tabset .tabset-dropdown}

## Tab A

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

## Tab B
When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:

## Tab C
```{r cars}
summary(cars)
```

## Including Plots

You can also embed plots, for example:

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

Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.

[yihui]

This has been supported in the current development version:

devtools::install_github('rstudio/rmarkdown')

[yihui]

@bschneidr We are working on upgrading Bootstrap v3 to v4 now (#1688). Unfortunately your CSS code doesn't work with Bootstrap 4. I wonder if you have time to revisit this feature and see if you could make it work for Bootstrap 4. You can start with remotes::install_github('rstudio/rmarkdown#1688'). Thank you!

[Zibetti]

Hello guys,
wondering if there is any news about this feature?
Thank you!

[github-actions]

This old thread has been automatically locked. If you think you have found something related to this, please open a new issue by following the issue guide (https://yihui.org/issue/), and link to this old issue if necessary.