17 Lesson

DevNexS · DevNexS · commit 8eba2366c043 · 2021-03-16T14:21:36.000+02:00
diff --git a/app.js b/app.js
@@ -57,4 +57,20 @@ searchBar.addEventListener('keyup', (e) => {
             book.style.display = 'none';
         }
     });
+});
+
+// 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');
+            }
+        });
+    }
 });
diff --git a/index.html b/index.html
@@ -44,6 +44,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>Text</p>
+        </div>
+        <div class="panel" id="contact">
+            <p>Content for contact tab...</p>
+            <p>Text</p>
+        </div>
+    </div>
 
 </div>
 <script src="app.js"></script>
