I'd like to make the bullet items on a flexdashboard/storyboard appear incrementally when the right arrow is clicked (presentation-style). How could this be achieved? I'm guessing a little Javascript but I don't know where to start. Ioslides export from Rmd has an option for incremental bullets, but I'd like to be able to do this on a per slide basis and I like the greater flexibility of flexdashboard/storyboard anyway.
See this MWE:
---
title: "How to increment?"
output:
flexdashboard::flex_dashboard:
storyboard: true
---
### Slide 1
```{r}
hist(rnorm(100))
```
***
- I want these bullets
- to appear
- incrementally
### Slide 2
```{r}
hist(runif(100))
```
***
- I want these bullets
- to appear
- all at once
- when this slide
- comes up
The solution that worked for me was to drop down to the knitr and to use the directive for raw html output. Rest was a bit of an ugly javascript. (Not that javascript is ugly. Just that I used ugly way of achieving the desired outcome. There is most certainly a cleaner way of doing the same thing.)
Note that this is the minimal example - the solution currently handles the onclick event on the whole document without regard to anything else. So if you decide to go this way, you will have to handle cases like returning from the second slide etc.
---
title: "How to increment?"
output:
flexdashboard::flex_dashboard:
storyboard: true
---
### Slide 1
```{r}
hist(rnorm(100))
```
***
```{r}
knitr::raw_html("<ul>")
knitr::raw_html("<li id='test1' style='display:none'> I want these bullets </li>")
knitr::raw_html("<li id='test2' style='display:none'> to appear </li>")
knitr::raw_html("<li id='test3' style='display:none'> incrementally </li>")
knitr::raw_html("</ul>")
```
```{js}
displayed = 0;
display = function() {
displayed++;
id = "test" + displayed;
el = document.getElementById(id);
el.style.display = "list-item";
}
document.onclick=display
```
### Slide 2
```{r}
hist(runif(100))
```
***
- I want these bullets
- to appear
- all at once
- when this slide
- comes up
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With