---
title: "Sliding Divs"
output:
  html_document:
    self_contained: true
---

<!-- a little CSS -->
<style>
    .slidingDiv {
      height:800px;
      width:100%
      background-color: #FFFFFF;
      padding:10px;
      margin-top:10px;
      border-bottom:5px solid #FFFFFF;
    }

    .show_hide {
      display:none;
    }
</style>

<!-- a little jQuery -->
<script>
  $(document).ready(function(){

  $(".slidingDiv").hide();
  $(".show_hide").show();

  $('.show_hide').click(function(){
  $(".slidingDiv").slideToggle();
  });

  });

  $table.width('auto');

</script>

<!-- Start the document -->

```{r datainput}
library(ggplot2)
library(DT)
data(iris)
```

## Here's a section header

Some text

#### <a href="###" class="show_hide">Click to show or hide data table</a>

<div class="slidingDiv">

```{r a.table}
datatable(iris)
```

</div>

### Another section

```{r a.plot}
qplot(Sepal.Width, Sepal.Length,
      color = Species,
      data = iris)
```