# 4.3 - Expandable views

## Introduction

![expandable views](https://github.com/Ringo-Pro/Ringo.Pro/wiki/img/expendable.gif)

## How it works

The application consist of two collapsable views: the filters view and the video view. Both are made with *the checkbox hack*. The bars consist of a checkbox label. When the label ( and thus the checkbox ) is checked the `:checked` CSS selector will be true and will move the panels to their correct positions. With a transition animation. Large benefit of the checkbox hack is that it will work without any JavaScript

```css
.filters_overlay {
  background: var(--background-color);
  height: 100%;
  width: 100%;
  position: fixed;
  transition: all 2s ease-in-out;
  z-index: 2;
  top: -100vh;
}
#active-filters:checked + .filters_overlay {
  top: 84px;
}
```

```css
.video_overlay {
  z-index: 2;
  background: var(--background-color);
  height: 100%;
  width: 100%;
  position: fixed;
  transition: all 2s ease-in-out;
  left: 100vw;
  top: 49px;
  display: flex;
  justify-content: space-around;
}
.video_video {
  width: 50%;
}
```
