bloominstituteoftechnology · Kennethaustin · Jun 20, 2019 · Jun 20, 2019 · Jun 20, 2019 · Jun 20, 2019
diff --git a/components/Dropdown/Dropdown.js b/components/Dropdown/Dropdown.js
@@ -2,27 +2,32 @@ class Dropdown {
   constructor(element) {
 
     // Assign this.element to the dropdown element
-    this.element;
+    this.element= element;
 
     // Get the element with the ".dropdown-button" class found in the dropdown element (look at the HTML for context)
-    this.button = this.element.querySelector();
+    this.button = this.element.querySelector('.dropdown-button');
 
     // assign the reference to the ".dropdown-content" class found in the dropdown element
-    this.content;
+    this.content= this.element.querySelector('.dropdown-content');
 
     // Add a click handler to the button reference and call the toggleContent method.
     this.button.addEventListener('click', () => {
-
-    })
+      this.toggleContent();
+    });
   }
 
   toggleContent() {
 
     // Toggle the ".dropdown-hidden" class off and on
-    this.content;
+    this.content.classList.toggle('dropdown-hidden');
   }
-}
 
 
+  slide() {
+  if (this.content.classList.toggle('dropdown-hidden')); {
+    TweenLite.to(this.content, 1, { y: -8, ease: Power3.easeOut })
+  }
+}
+}
 // Nothing to do here, just study what the code is doing and move on to the Dropdown class
-let dropdowns = document.querySelectorAll('.dropdown').forEach( dropdown => new Dropdown(dropdown));
+let dropdowns = document.querySelectorAll('.dropdown').forEach( dropdown => new Dropdown(dropdown));
diff --git a/components/Tabs/Tabs.js b/components/Tabs/Tabs.js
@@ -2,50 +2,68 @@
 class TabLink {
   constructor(element) {
     // Assign this.element to the passed in DOM element
-    // this.element;
+   this.element = element;
 
     // Get the custom data attribute on the Link
-    // this.data;
+    this.data = this.element.dataset.tab;
 
     // Using the custom data attribute get the associated Item element
-    // this.itemElement;
+    this.itemElement = document.querySelector(`.tabs-item[data-tab="${this.data}"]`);
 
     // Using the Item element, create a new instance of the TabItem class
-    // this.tabItem;
-
-    // Add a click event listener on this instance, calling the select method on click
+    this.tabItem = new TabItem(this.itemElement);
 
-  };
 
+
+    // Add a click event listener on this instance, calling the select method on click
+    this.element.addEventListener('click', () => {
+      this.select();
+  })
+  }
   select() {
     // Get all of the elements with the tabs-link class
-    // const links;
-
+    const links = document.querySelectorAll('.tabs-links');
     // Using a loop or the forEach method remove the 'tabs-link-selected' class from all of the links
-    // Array.from(links).forEach();
+      Array.from(links).forEach(tab =>
+        tab.classList.remove("tabs-link-selected")
+      );
 
     // Add a class named "tabs-link-selected" to this link
-    // this.element;
+    this.element.classList.add('tabs-link-selected');
 
     // Call the select method on the item associated with this link
-
+    this.tabItem.select(this.itemElement);
   }
 }
 
 class TabItem {
   constructor(element) {
     // Assign this.element to the passed in element
-    // this.element;
+   this.element=element;
   }
 
   select() {
     // Select all ".tabs-item" elements from the DOM
-    // const items;
+    const items=document.querySelectorAll('.tabs-item');
 
     // Remove the class "tabs-item-selected" from each element
-
+    items.forEach((item) => {
+      item.classList.remove('tabs-item-selected')
+    });
     // Add a class named "tabs-item-selected" to this element
-    //this.element;
+    setTimeout(() => {
+      this.element.classList.add("tabs-item-selected");
+      TweenMax.fromTo(
+        this.element,
+        0.5,
+        {
+          opacity: 0
+        },
+        {
+          opacity: 1
+        }
+      );
+    }, 500);
   }
 }
 
@@ -59,4 +77,4 @@ class TabItem {
 
 */
 
-links = document.querySelectorAll();
+links = document.querySelectorAll('.tabs-link').forEach(link => new TabLink(link));
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
 		<link rel="stylesheet" href="./CSS/index.css">
 	</head>
 	<body>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
 		<script defer="defer" src="./components/Dropdown/Dropdown.js"></script>
 		<script defer="defer" src="./components/Tabs/Tabs.js"></script>
 
@@ -30,14 +31,15 @@
 				<div class="box-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.</div>
 			</div>
 		</div>
-
 		<div class="section">
 				<div class="tabs">
 					<div class="tabs-links">
 						<div class="tabs-link tabs-link-selected" data-tab="1">Tab 1</div>
 						<div class="tabs-link" data-tab="2">Tab 2</div>
 						<div class="tabs-link" data-tab="3">Tab 3</div>
 						<div class="tabs-link" data-tab="4">Tab 4</div>
+						<div class="tabs-link" data-tab="5">Testing Tab </div>
+						<div class="tabs-link" data-tab="6">Testing Tab 1</div>
 					</div>
 					<div class="tabs-items">
 						<div class="tabs-item tabs-item-selected" data-tab="1">
@@ -72,6 +74,7 @@
 								that this has already happened.
 							</div>
 						</div>
+
 					</div>
 				</div>
 			</div>