diff --git a/‎app.js‎
Lines changed: 16 additions & 0 deletions b/‎app.js‎
Lines changed: 16 additions & 0 deletions
diff --git a/‎index.html‎
Lines changed: 14 additions & 0 deletions b/‎index.html‎
Lines changed: 14 additions & 0 deletions
diff --git a/‎styles.css‎
Lines changed: 2 additions & 4 deletions b/‎styles.css‎
Lines changed: 2 additions & 4 deletions
@@ -58,3 +58,19 @@ searchBar.addEventListener('keyup', (e) => {
     }
   });
 });
+
+// tabbed content
+const tabs = document.querySelector('.tabs');
+const panels = document.querySelectorAll('.panel');
+tabs.addEventListener('click', (e) => {
+  if(e.target.tagName == 'LI'){
+    const targetPanel = document.querySelector(e.target.dataset.target);
+    Array.from(panels).forEach((panel) => {
+      if(panel == targetPanel){
+        panel.classList.add('active');
+      }else{
+        panel.classList.remove('active');
+      }
+    });
+  }
+});
@@ -43,6 +43,20 @@ <h2 class="title">Books to Read</h2>
 	    	<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>
 
@@ -124,7 +124,6 @@ h1, h2{
   line-height: 52px;
 }
 
-/*
 #tabbed-content li{
     display: inline-block;
     padding: 10px 14px;
@@ -134,14 +133,13 @@ h1, h2{
     margin-right: 10px;
 }
 
-#tabbed-content .tab{
+#tabbed-content .panel{
     display: none;
     border: 1px solid #ddd;
     padding: 0 10px;
     border-radius: 4px;
 }
 
-#tabbed-content .tab.active{
+#tabbed-content .panel.active{
     display: block;
 }
-*/
Original file line number	Diff line number	Diff line change
@@ -124,7 +124,6 @@ h1, h2{
124	124	line-height: 52px;
125	125	}
126	126
127		- /*
128	127	#tabbed-content li{
129	128	display: inline-block;
130	129	padding: 10px 14px;
@@ -134,14 +133,13 @@ h1, h2{
134	133	margin-right: 10px;
135	134	}
136	135
137		- #tabbed-content .tab{
	136	+ #tabbed-content .panel{
138	137	display: none;
139	138	border: 1px solid #ddd;
140	139	padding: 0 10px;
141	140	border-radius: 4px;
142	141	}
143	142
144		- #tabbed-content .tab.active{
	143	+ #tabbed-content .panel.active{
145	144	display: block;
146	145	}
147		- */