0
425
Viewsreferencing a nested tab in rmarkdown/js?
I'm not too familiar with JavaScript or CSS but I use bits and pieces of it in RMarkdown. I'm working on a document that has a page with tiles/buttons that are used as navigation buttons to get to other tabs in my RMarkdown (crediting Allen O'Brien for this code!). These all work great but I am wondering how to create a tile that navigates to a specific sub-tab. So for instance I have these three buttons:
{js, echo = FALSE}
// Set destination for clicks on the id tabs after page is ready
$(document).ready ( function () {
// When tile 1 (#tile1) is clicked, navigate to the report-details tab.
$( "#tile1" ).on( "click", function() {
$('.nav-pills li a[href="#individuals"]').tab('show');
});
// When tile 2 (#tile2) is clicked, navigate to the report-details tab.
$( "#tile2" ).on( "click", function() {
$('.nav-pills li a[href="#hormone-plots"]').tab('show');
});
// When tile 3 (#tile3) is clicked, navigate to the report-details tab.
$( "#tile3" ).on( "click", function() {
$('.nav-pills li a[href="#species-comparison"]').tab('show');
});
});
Each of these tabs have additional tabs on that page that I've created just as a new tabset like this:
## Individuals {- .tabset}
### #4 {- .tabset}
And what I'd like to do is have a button that references let's say Individual #4, instead of having to click the Individuals button, then clicking on the Individual #4 subtab on that page. Any suggestions?
Here is a clearer update- this is how my current markdown doc is set up. The highlights is the page with all the buttons. All buttons right now are referencing headers with two ## (like Individual Whales), but I'm trying to build buttons that can also reference the ### headers (like Blue Whale 617698)
# {- .tabset .tabset-fade .tabset-pills}
## Highlights {-}
<div>
<div class="info-tile" id="tile1" style = "background: salmon;">
<span class = "info-tile-large-text">Individual Profiles</span> <br />
</div>
</div>
## Individual Whales {- .tabset}
### Blue Whale 617698 {- .tabset}
1 answers
Answer question0
Whew! This didn't look like it would be all that hard, but wow! I found a lot of methods that broke the tab set!
Here is a method that works regardless of how many or how deeply you nest your tab sets.
I ended up using JS instead of JQuery. I used a nest within a nest within a nest, so I could make sure it was still going to work. If this is over the top, let me know, and I'll make a simpler version.
The image on the right shows that the 3rd level-1 tabset's first level-2 tabset is where the 'Individuals' > 4 is.
You can see your button below the heading 'Analysis.' The button can be moved anywhere (that I could think to test) and it will still work.
The styling is just for the button.
---
title: "Untitled"
author: "me"
date: "4/9/2022"
output: html_document
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```
<style>
.info-tile {
vertical-align: middle;
-moz-box-shadow: 0px 10px 14px -7px #000000;
-webkit-box-shadow: 0px 10px 14px -7px #000000;
box-shadow: 0px 10px 14px -7px #000000;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid salmon;
display: inline-block;
font-size: 20px;
padding: 6px 50px;
text-decoration: none; /*no underline!!*/
cursor: pointer;
}
.info-tile:active { /*simulate movement*/
position: relative;
top: 1px;
}
</style>
The nested tab sets
# Analysis {.tabset .tabset-fade .tabset-pills}
<a class="info-tile" id="tile1" style="background: salmon; color:black; font-face: bold;">Individual Profiles</a>
## 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
### Individuals {.tabset .tabset-fade .tabset-pills}
#### 4 <!--- BUTTON TARGET IS HERE!!!---->
```{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)
```
Last but not least, the JS to make the button do it's thing
```{r mine,results="asis",engine="js"}
// send me where I realllllly want to go
setTimeout(function(){
document.querySelector('a#tile1').addEventListener('click', doIt);
function doIt(){
document.querySelector('a[href*="#section-6"]').click(); //section 3
document.querySelector('a[href*="#section-7"]').click(); // Indiv 4
}
}, 100); // a tiny delay... just in case I'm running behind
```