Read More / Read Less

HuXn-WebDev · HuXn-WebDev · commit 470f43cc8d64 · 2022-07-13T12:53:25.000-07:00
diff --git a/36. Read More and Read Less/app.js b/36. Read More and Read Less/app.js
@@ -0,0 +1,6 @@
+const containerTwo = document.querySelector(".content-container-2");
+const btn = document.querySelector(".btn");
+
+btn.addEventListener("click", () => {
+  containerTwo.classList.toggle("toggle");
+});
diff --git a/36. Read More and Read Less/index.html b/36. Read More and Read Less/index.html
@@ -0,0 +1,37 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Read More / Read Less</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <header>
+        <h2>Welcome To The Real World</h2>
+        <p class="para">
+          <span class="content-container-1">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam quia
+            vitae ipsam incidunt ipsa sapiente. Repellat labore odit, cum
+            blanditiis eum sed delectus, ipsa debitis eius quibusdam aliquam
+            harum officia ...
+          </span>
+          <br />
+        </p>
+
+        <p class="para">
+          <span class="content-container-2">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam quia
+            vitae ipsam incidunt ipsa sapiente. Repellat labore odit, cum
+            blanditiis eum sed delectus, ipsa debitis eius quibusdam aliquam
+            harum officia ...
+          </span>
+          <button class="btn">Learn More</button>
+        </p>
+      </header>
+    </div>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/36. Read More and Read Less/style.css b/36. Read More and Read Less/style.css
@@ -0,0 +1,52 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: sans-serif;
+}
+
+body {
+  min-height: 100vh;
+  background-color: blanchedalmond;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 70px;
+}
+
+.container {
+  background: #fff;
+  padding: 30px 40px;
+  border-radius: 10px;
+  width: 50%;
+}
+
+header h2 {
+  font-size: 1.4rem;
+}
+
+.para {
+  margin-top: 12px;
+  font-size: 18px;
+}
+
+.para .content-container-2 {
+  display: none;
+}
+
+.btn {
+  background-color: black;
+  color: #fff;
+  padding: 10px 45px;
+  font-size: 1.1rem;
+  border-radius: 5px;
+  outline: none;
+  border: none;
+  cursor: pointer;
+  margin-top: 15px;
+}
+
+/* JavaScript */
+.content-container-2.toggle {
+  display: block;
+}
