10

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
haff
  • 918
  • 2
  • 9
  • 20

1 Answers1

2

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
Shamis
  • 2,544
  • 10
  • 16
  • Thanks for this. I think it's definitely a step in the right direction. In most cases, I would only need the "surprise" factor of holding back the incremental sections on the first run-through, so this would probably be sufficient. That said, I'm using `xaringan` now which is bit more presentation friendly since that's what it's designed for. – haff Jan 07 '20 at 19:44