Incremental content do not work inside div

Question

I am adding incremental bullet points inside a div and it doesn't seem to work.

pres.Rmd

---
title: "Incremental in Div"
output:
  xaringan::moon_reader:
    encoding: 'UTF-8'
    self_contained: false
    css: ['default','styles.css']
---

## No div

- Point 1

--

- Point 2

---

## Div direct

Div style is defined directly in HTML/CSS.

<div style="width: 49%;float: left;margin-right: 0.5%;margin-left: 0.5%;">

- Point 1

--

- Point 2

</div>

--

<div style="width: 49%;float: right;margin-right: 0.5%;margin-left: 0.5%;">

- Point 1

--

- Point 2

</div>

---

## Div styles

Div style is defined through classes in the styles.css file.

.pull-left-50[

- Point 1

--

- Point 2

]

--

.pull-right-50[

- Point 1

--

- Point 2

]

styles.css

.pull-right-50 {
  width: 49%;
  float: right;
  margin-right: 0.5%;
  margin-left: 0.5%;
}
.pull-left-50 {
  width: 49%;
  float: left;
  margin-right: 0.5%;
  margin-left: 0.5%;
}

Answer 1

Try this:

---
title: "Incremental in Div"
output:
  xaringan::moon_reader:
    encoding: 'UTF-8'
    self_contained: false
    css: ['default', "style.css"]
---



.pull-left-50[
- Point 1

{{content}}

]

--

- Point 2

{{content}}

--

- Point 3 

{{content}}

--

- Point 4

{{content}}

--

- Point 5

--

.pull-right-50[

- Point 6

{{content}}

]

--

- Point 7

{{content}}


--

- Point 8

{{content}}


--

- Point 9

{{content}}

--

- Point 10