added mobile accordion for schedule tabs with bootstrap

pasha-log · Oct 16, 2023 · f7cc646 · f7cc646
1 parent 999baf9
commit f7cc646
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
         <nav class="navbar">
             <div id="navbar-content" class="container-fluid">
                 <a class="navbar-brand">
-                    <img class="logo" src="images/lam-logo.png" alt="logo" width="40" height="40">
+                    <img id="top-logo" class="logo" src="images/lam-logo.png" alt="logo" width="40" height="40">
                 </a>
                 <div class="nav-links">
                     <a class="history-link" href="#history">01. HISTORY</a>
@@ -78,14 +78,42 @@
             <img class="active-tab-image" id="tab-one-image" src="images/lam-tab-1-schedule.png" alt="tab-one" width="400" height="280" />
             <img class="inactive-tab-image" id="tab-two-image" src="images/lam-tab-2-schedule.png" alt="tab-one" width="400" height="280" />
         </div>
-        <div class="footer">
-            <div class="footer-div">
-                <a class="footer-logo-link" href="#hero">
-                    <img class="footer-logo" src="images/lam-footer-logo.png" alt="footer-logo" width="205" height="65" />
-                </a>
-                <div class="copyright">
-                    COPYRIGHT 2016. ALL RIGHTS RESERVED
-                </div>
+    </div>
+    <!-- Schedule Accordian For Mobile -->
+    <div class="accordion accordion-flush" id="accordionFlush">
+        <div class="accordion-item">
+          <h2 class="accordion-header">
+            <button id="accordion-button-one" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
+              MOUNTAIN 1
+            </button>
+          </h2>
+          <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlush">
+            <div id="accordion-body-one" class="accordion-body">
+                <img class="" id="" src="images/lam-tab-1-schedule.png" alt="tab-one" width="400" height="280" />
+            </div>
+        </div>
+    </div>
+    <div class="accordion-item">
+        <h2 class="accordion-header">
+            <button id="accordion-button-two" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
+                MOUNTAIN 2
+            </button>
+        </h2>
+        <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlush">
+            <div id="accordion-body-two" class="accordion-body">
+                <img class="" id="" src="images/lam-tab-2-schedule.png" alt="tab-one" width="400" height="280" />
+            </div>
+          </div>
+        </div>
+    </div>
+    <!-- Footer -->
+    <div class="footer">
+        <div class="footer-div">
+            <a class="footer-logo-link" href="#hero">
+                <img class="footer-logo" src="images/lam-footer-logo.png" alt="footer-logo" width="205" height="65" />
+            </a>
+            <div class="copyright">
+                COPYRIGHT 2016. ALL RIGHTS RESERVED
             </div>
         </div>
     </div>
@@ -100,12 +128,6 @@
 </html>
 
 <!-- TODO 
-* Build responsive carousel with flickity?
-* Add tab functionality, that turns into accordion on smaller sizes
-    - Tabs use two types of buttons: active and inactive. JavaScript should change picture and schedule.
-* Nav links take you to respective sections
-* Overall responsiveness of content
-    - Use media queries and clamps
 * Refactor css 
     - Minimize repeated code
     - Code the color variables

diff --git a/scripts/index.js b/scripts/index.js
@@ -6,4 +6,13 @@ $(document).ready(function() {
 		$('#tab-one-image, #tab-two-image').toggleClass('active-tab-image inactive-tab-image');
 		$('#schedule-section').toggleClass('active-section inactive-section');
 	});
+
+	$('#accordion-button-one').click(function() {
+		$('#accordion-button-one').toggleClass('"" collapsed');
+		$('#flush-collapseOne').toggleClass('"" show');
+	});
+	$('#accordion-button-two').click(function() {
+		$('#accordion-button-two').toggleClass('"" collapsed');
+		$('#flush-collapseTwo').toggleClass('"" show');
+	});
 });
diff --git a/styles/index.css b/styles/index.css
@@ -18,6 +18,10 @@
 	width: 60%;
 }
 
+#top-logo {
+	margin-left: 1rem;
+}
+
 .nav-links a {
 	color: white;
 }
@@ -147,6 +151,11 @@
 	color: rgb(171, 171, 171);
 }
 
+.accordion-button {
+	color: #364659;
+	font-weight: 500;
+}
+
 #schedule-section {
 	background-size: cover;
 	background-position: center center;
@@ -183,6 +192,28 @@
 	display: none;
 }
 
+.accordion {
+	display: none;
+}
+
+#accordion-body-one,
+#accordion-body-two {
+	background-size: cover;
+	background-position: center center;
+	background-repeat: no-repeat;
+	height: 60vh;
+	display: grid;
+	place-content: center;
+}
+
+#accordion-body-one {
+	background-image: url("../images/lam-tab-1.png");
+}
+
+#accordion-body-two {
+	background-image: url("../images/lam-tab-2.png");
+}
+
 .footer {
 	background-color: #465573;
 	width: 100%;
@@ -207,3 +238,81 @@
 	color: #687da6;
 	font-weight: 500;
 }
+
+@media screen and (max-width: 768px) {
+	.hero-section {
+		height: 40vh;
+	}
+
+	#navbar-content {
+		width: 100%;
+	}
+
+	#top-logo {
+		margin-left: 0rem;
+	}
+
+	.history-info {
+		width: 90%;
+	}
+
+	.history-text {
+		padding-left: 1rem;
+		padding-right: 1rem;
+	}
+
+	.climb-info {
+		width: 90%;
+		display: grid;
+
+		margin-top: 2rem;
+		margin-bottom: 1rem;
+		padding-left: 0rem;
+		padding-right: 0rem;
+	}
+
+	.climb-title {
+		justify-self: start;
+	}
+
+	.mountain-tabs,
+	#schedule-section,
+	.schedule-image {
+		display: none;
+	}
+
+	.accordion {
+		display: block;
+	}
+
+	.footer {
+		background-color: #465573;
+		width: 100%;
+		height: 5rem;
+		display: grid;
+		justify-items: center;
+	}
+
+	.footer-div {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 90%;
+		/* border: solid 2px green; */
+	}
+
+	.footer-logo-link {
+		margin-left: 0rem;
+	}
+
+	.footer-logo-link img {
+		width: 120px;
+		height: 40px;
+	}
+
+	.copyright {
+		color: #687da6;
+		font-weight: 500;
+		font-size: small;
+	}
+}