diff --git a/src/components/GWL.vue b/src/components/GWL.vue
index 7b63988..13631c9 100644
--- a/src/components/GWL.vue
+++ b/src/components/GWL.vue
@@ -37,10 +37,6 @@
           >
             {{ this.button_text_speed }}
           </button>
-          <!-- <input
-            type="checkbox"
-            class="toggle"
-          > -->
           </div>
         </div>
 
@@ -66,11 +62,19 @@
         <p
           class="text-content"
         >
-          This map animates groundwater levels at {{ this.n_sites }} well sites across the U.S. At each site, groundwater levels are shown relative to the daily historic record (<a
+          This map animates groundwater levels at {{ this.n_sites }} well sites across the U.S. At each site, groundwater levels are shown relative to the historic record (<a
             href="https://waterwatch.usgs.gov/ptile.html"
             target="_blank"
           >using percentiles</a>), indicating where groundwater is comparatively high or low to what has been observed in the past. The corresponding time series chart shows the percent of sites in each water-level category through time. 
         </p>
+         <Sidebar>
+        <template v-slot:sidebarTitle>
+          percentile
+        </template>
+        <template v-slot:sidebarMessage>
+          <p><span class="emph">percentile</span> </p>
+        </template>
+      </Sidebar>
         <p
           class="text-content"
         >
@@ -93,7 +97,7 @@
           <a
             href="https://waterdata.usgs.gov/nwis"
             target="_blank"
-          >USGS National Water Information System (NWIS)</a> data between January 1, 1900 and December 31, 2020 for the USGS parameter code, 72019. If no daily values were available for 72019 but instantaneous records were, the daily value was calculated by averaging the instantaneous values per day based on the local time zone. For three states, the 72019 parameter code was not reported and a different parameter code was used to calculate daily groundwater percentiles (62610 was used for Florida and Kansas; 72150 was used for Hawaii). Only groundwater sites with a minimum of 3 years of data were retained in the historic daily record.
+          >USGS National Water Information System (NWIS)</a> data between January 1, 1900 and December 31, 2020 for the USGS parameter code, 72019. If no daily values were available for 72019 but instantaneous records were, the daily value was calculated by averaging the instantaneous values per day based on the local time zone. For three states, the 72019 parameter code was not reported and a different parameter code was used to calculate daily groundwater percentiles (62610 was used for Florida and Kansas; 72150 was used for Hawaii). Only groundwater sites with a minimum of 3 years of data were used in the historic record.
         </p>
         <br>
         <hr>
@@ -127,11 +131,13 @@ import { csv } from 'd3-fetch';
 import { line, path , format} from 'd3';
 import GWLmap from "@/assets/gw-conditions-peaks-map.svg";
 import { isMobile } from 'mobile-device-detect';
+import Sidebar from '@/components/Sidebar';
 
 export default {
   name: "GWLsvg",
     components: {
       GWLmap,
+      Sidebar,
       Legend: () => import( /* webpackPreload: true */ /*webpackChunkName: "Legend"*/ "./../components/Legend")
     },
     data() {
@@ -847,32 +853,6 @@ text.legend-label {
       justify-content: end;
       }
 }
-/* .toggle:before {
-  content: "fast slow";
-  position: absolute;
-  z-index: 2;
-  width: 21px;
-  height: 21px;
-  background: #fff;
-  left: 2px;
-  top: 2px;
-  border-radius: 50%;
-  font: 16px/28px Helvetica;
-  font-weight: bold;
-  text-indent: -37px;
-  word-spacing: 29px;
-  color: #fff;
-  white-space: nowrap;
-  transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
-}
-
-.toggle:checked {
-  background-color: $dark; // color for fast
-}
-
-.toggle:checked:before {
-  left: 47px;
-} */
 #vizlab-wordmark {
   max-width: 200px;
   display: block;
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
new file mode 100644
index 0000000..1f63333
--- /dev/null
+++ b/src/components/Sidebar.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="sidebar collapsed opacity">
+    <div class="sidebarContent">
+      <div class="titleAndExit">
+        <button
+          class="reveal"
+          @click="toggle"
+        >
+          <slot name="sidebarTitle">
+            Reveal
+          </slot>
+        </button>
+        <div
+          class="exit hidden"
+          @click="toggle"
+        >
+          X
+        </div>
+      </div>
+      <div class="messageArea">
+        <div class="message">
+          <slot name="sidebarMessage">
+            Message
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+    name: "SidebarTwo",
+    mounted(){
+        window.addEventListener("load", () => this.setDimensions());
+    },
+    methods:{
+        setDimensions(){
+            const sidebar = this.$el;
+            const button = this.$el.querySelector(".reveal")
+            const buttonDimensions = button.getBoundingClientRect();
+            sidebar.style.height = `${buttonDimensions.height}px`;
+            sidebar.style.width = `${buttonDimensions.width}px`;
+            sidebar.classList.remove("opacity");
+        },
+        toggle(){
+            const exit = this.$el.querySelector(".exit");
+            exit.classList.toggle("hidden");
+            if(this.$el.classList.contains("expanded")){
+                
+                this.$el.classList.remove("expanded");
+                this.$el.classList.add("collapsed");
+                this.setDimensions();
+            }else{
+                this.$el.classList.remove("collapsed");
+                this.$el.classList.add("expanded");
+                this.$el.style.width = "auto";
+                this.$el.style.height = "auto";
+            }   
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+$deepBlue: #00478F; //#00478F;
+$familyMain: 'Public sans', sans-serif;
+.sidebar{
+    display: flex;
+    flex-direction: row;
+    margin: 15px 20px;
+    transition: width 2s, height 2s, transform 2s;
+    will-change: width;
+    background: $deepBlue;
+    border-radius: 5px;
+    transition: opacity 0.3s;
+
+}
+.titleAndExit{
+    position: relative;
+    color:#fff;
+    font-weight: bold;
+    
+}
+.reveal{
+    padding: 5px 10px;
+    outline: none;
+}
+.opacity{
+  opacity: 0;
+}
+.exit{
+    position: absolute;
+    right: 5px;
+    top: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: $familyMain;
+    font-size: 1em;
+    padding: 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    &:hover{
+        background: #fff;
+        color:$deepBlue;
+        transition: background-color .1s;
+    }
+}
+.messageArea{
+    padding:0 10px 10px 10px;
+}
+.message{
+    background: #fff;
+    padding: 10px;
+    *{
+      padding-top: 0;
+      margin-bottom: 10px;
+      &:last-child{
+        margin-bottom: 0;
+      }
+    }
+}
+.collapsed{
+    .message{
+        width: 0;
+        height: 0;
+        opacity: 0;
+    }
+}
+.hidden{
+    display: none;
+}
+</style>
\ No newline at end of file