@@ -57,4 +57,20 @@ searchBar.addEventListener('keyup', function(e){
       book.style.display = 'none';
       }
     });
-  });
+  });
+
+  //tabbed content
+  const tabs = document.querySelector('.tabs')
+  const panel = document.querySelectorAll('.panel');
+  tabs.addEventListener('click', function(e){
+  if(e.target.tagname == 'LI'){
+    const targetPanel = document.querySelector(e.target.dataset.target);
+    panel.forEach(function(panel){
+      if (panel == targetpanel){
+        panel.classList.add('active');
+      } else {
+        panel.classList.remove('active');
+      }
+    })
+  }
+})
@@ -38,13 +38,26 @@ <h2 class="title">Books to Read</h2>
 	    	</ul>
 	    </div>
 	    <form id="add-book">
-			<input type='checkbox' id='hide'/>
-			<label for='hide'>Hide all books</label>
+        <input type="checkbox" id="hide" />
+        <label for="hide">Hide all books</label>
 	    	<input type="text" placeholder="Add a book..." />
 	    	<button>Add</button>
 	    </form>
-
+      <div id="tabbed-content">
+        <ul class="tabs">
+          <li data-target="#about" class="active">About</li>
+          <li data-target="#contact">Contact</li>
+        </ul>
+        <div class="panel active" id="about">
+          <p>Content for about tab...</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id nunc porta urna ornare rhoncus. Ut convallis ante at.</p>
+        </div>
+        <div class="panel" id="contact">
+          <p>Content for contact tab...</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id nunc porta urna ornare rhoncus. Ut convallis ante at.</p>
+        </div>
+      </div>
     </div>
     <script src="app.js"></script>
   </body>
-</html>
+</html>
@@ -123,8 +123,16 @@ h1, h2{
     line-height: 52px;
 }
 
-/*
-#tabbed-content .tab{
+#tabbed-content li{
+    display: inline-block;
+    padding: 10px 14px;
+    background: #ddd;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-right: 10px;
+}
+
+#tabbed-content .panel{
     display: none;
     border: 1px solid #ddd;
     padding: 0 10px;
@@ -134,4 +142,3 @@ h1, h2{
 #tabbed-content .tab.active{
     display: block;
 }
-*/