Merge pull request #43 from turingschool/dropdowns

add simple dropdown

_sass/content.scss

@@ -56,7 +56,7 @@
   border: none;
 }
 
-.answer {
+.dropdown {
   @extend %call-to-action-shared;
   border-left: 8px solid #CCC;
 
@@ -77,3 +77,16 @@
   transform: rotate(90deg);
   transition: transform 0.2s ease;
 }
+
+.expander-arrow {
+  cursor: pointer;
+  transform: rotate(0deg);
+  transition: transform 0.2s ease;
+  height: 15px;
+  width: 15px;
+}
+
+.expander-arrow.expanded {
+  transform: rotate(90deg);
+  transition: transform 0.2s ease;
+}

public/js/expander.js

@@ -1,12 +1,12 @@
 console.log("in expander.js")
-$('.answer > h3').each(function(idx, title) {
+$('.dropdown > h3').each(function(idx, title) {
   const titleText = $(title).text();
   $(title).replaceWith(`<h3><img class="expander-arrow" src="/assets/images/arrow.svg" alt="expander arrow" /> ${titleText}</h3>`);
 });
 
-$('.answer > h3').nextAll().hide();
+$('.dropdown > h3').nextAll().hide();
 
-$('.answer > h3').on('click', function() {
+$('.dropdown > h3').on('click', function() {
   let arrowEl = $(this).find('img.expander-arrow');
 
   if (!arrowEl.hasClass('expanded')) {

readme.md

@@ -31,6 +31,23 @@ The `today.html` file is where you will find the basic html page for today, and
 
 ## Some handy tips for editing/creating content
 
+### Creating Dropdowns
+
+To create a dropdown like this:
+
+![screenshot of dropdown format](./assets/images/dropdown-example.png)
+
+Use the following structure:
+
+```
+<section class="dropdown">
+
+### Test Dropdown - this must be a <h3>
+test content
+
+</section>
+```
+
 ### Headers in your markdown files
 
 Put something like this at the top of all your markdown files: