quarto how to use tabset pills

[Liripo]

Description

When I try to use it like this, there are some extra borders around.

---
format:
  html
---

::: {.nav-pills}
::: {.panel-tabset}

## Summary

message

## Analysis

message

:::
:::

[mcanouil]

You need to add the class to the same div as the tabset.

Quarto document	HTML
--- format: html --- ::: {.panel-tabset .nav-pills} ## Summary message ## Analysis message :::

Although I don't quite understand what you call "extra border", see below.

Default	Pills

If you wish to remove the panel border:

Default	Pills
--- format: html include-in-header: - text: | <style> .panel-tabset > .nav-tabs, .panel-tabset > .tab-content { border: none; } </style> --- ::: {.panel-tabset .nav-pills} ## Summary message ## Analysis message :::

[mcanouil]

My bad, I did not expect it in the middle and far from theme key.
Note that this is exactly why we ask for small reproducible example and not example with dozens of unrelated options.

title: "Getting pills"
format:
  revealjs:
    css: bootstrap.css

See a related discussion: #7356

Note that if Bootstrap is not a dependency or Reveal.js it means it is up to you to handle the issues that comes with including it yourself.

you'll have to deal with possible (S)CSS conflicts yourself.

[cderv]

@Walser52 I don't think including bootstrap support for revealjs is as easy as just using the CSS. Probably there is some JS code associated I believe (for making tabs active / unactive). And also rules of the bootstrap CSS are not all related to Revealjs structure (which uses <section>) so this could have issues

So overall

• Revealjs does not have bootstrap
• Quarto support Tabset for reveals, without Bootstrap
• But any Boostrap feature won't be available in Revealjs - Quarto or not Quarto.

So I would not try to use this pills effect from bootstrap. You would have better change to try reproduce it in CSS / JS on your own

You'll find example online of JS snippet that are trying to reproduce - we don't have yet such feature for Revealjs

[Walser52]

Thank you. I couldn't get it to work using the bootstrap css. I eventually managed the following css:

.tab {
  overflow: hidden;
  background-color: white;
  /*border: 1px solid #ccc;*/
}

/* Style the buttons inside the tab */
.tab button {
  background-color: #ddd;
  float: right;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  border-radius: 10px 10px 0 0; /* Add rounded corners only to the top */
  margin-right: 10px; /* Add some gap between buttons */
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ccc;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: teal;
    color: white;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
    background-color: #b3e0dc;
  border: none; /* Remove the border */
  border-top: none;
  border-radius: 10px 10px 5px 5px; /* Add rounded corners only to the bottom */
}

And used the following html and javascript:

## 

```{=html}
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

```

I'm happy with how it looks. If I remove the background on the tab content it works fine.

Two things though:

1. I would like to make it neater. The thing I like about Quarto is that doesn't hide my content in the mass of code.
2. Is it possible to put R code chunks into these tabs?

[cderv]

I would personally try to adapt the JS and CSS you have to the HTML structure that Quarto produce for tabset in Revealjs format.

That way you can use Markdown to produce the tabset, including code block.

And then you JS + CSS applies to bring the feature you want.

[Walser52]

So I've worked out a solution which I think looks quite elegant. Happy to share it:

## Results

:::{.navbar}
[Option 1]{.nav-option data-option="option1" onclick="showContent(this)"}
[Option 2]{.nav-option data-option="option2" onclick="showContent(this)"}
[Option 3]{.nav-option data-option="option3" onclick="showContent(this)"}
:::

:::{#option1Content .content}
![](_figs/caffeine.jpg)
:::

:::{#option2Content .content}
![](_figs/aerial-forest.jpg)
:::

:::{#option3Content .content}
This is the content for Option 3.
:::

With the following script:

<script>
    function showContent(clickedElement) {
        // Hide all content divs
        var allContents = document.getElementsByClassName('content');
        for (var i = 0; i < allContents.length; i++) {
            allContents[i].style.display = 'none';
        }

        // Deactivate all nav options
        var allNavOptions = document.getElementsByClassName('nav-option');
        for (var i = 0; i < allNavOptions.length; i++) {
            allNavOptions[i].classList.remove('active');
        }

        // Show the selected content
        var option = clickedElement.getAttribute('data-option');
        document.getElementById(option + 'Content').style.display = 'block';

        // Activate the selected nav option
        clickedElement.classList.add('active');
    }
</script>

and css:

.navbar {
    /*background-color: teal;*/
    background-color: white;
    overflow: hidden;
    color: black;

}

.nav-option {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;

    cursor: pointer;
    margin: 0;
}

.nav-option:hover {

    background-color: #ddd;
    color: black;
}

.nav-option.active {
/*    background-color: yellow;*/
    text-decoration: underline;
    text-decoration-thickness: 10%;
    text-decoration-color: Crimson;
    color: black;

}

.content {
    padding: 16px;
    display: none;
}

Thank you everyone for your help.