Read more option added

css/review.css

@@ -32,4 +32,4 @@
 
 /* Adjust labels to change slide order *//*
 #slide1:checked ~ .slider { animation-delay: 0s; }
-#slide2:checked ~ .slider { animation-delay: -14s; } */
+#slide2:checked ~ .slider { animation-delay: -14s; } */

css/style.css

@@ -630,6 +630,7 @@ section
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
     gap: 1.5rem;
+    /* height: auto; */
 }
 
 .blogs .box-container .box
@@ -693,9 +694,23 @@ section
     color: var(--light-color);
     font-size: 1.5rem;
     padding-bottom: .5rem 0 ;
+    /* height: 18rem; */
 }
+/* 
+.blogs .box-container {
+    display: flex;
+    flex-direction: column;
+} */
 
+.blogs .box-container .box {
+    /* max-height: 100px; */
+    overflow: hidden;
+    position: relative;
+}
 
+.blogs .box-container .box.expanded {
+    height: auto;
+}
 
 /* footer css */
 .footer

index.html

@@ -444,45 +444,46 @@ <h1 class="heading" style="font-size: 3rem;"> <a target="_blank" href="review/re
             <h1 class="heading"> &#128221; our <span> blogs </span></h1>
 
             <div class="box-container">
-                <div class="box">
+                <div class="box morebox">
                     <img src="image/blog-1.jpg" alt="blog image 1">
                     <div class="content">
                         <div class="icons">
                             <a href="#"><i class="fa fa-user"></i> By Linda Tim </a>
                             <a href="#"><i class="fa fa-calendar"></i> 1st May , 2021 </a>
                         </div>
                         <h3> fresh and organic vegetables and fruits </h3>
-                        <p>Organic vegetables are those that are grown without the use of synthetic pesticides, herbicides, fertilizers, or other chemicals.</p>
-                        <a href="#" class="btn">read more</a>
+                        <p id="description1">Fresh and organic vegetables and fruits are nature's vibrant bounty, brimming with essential nutrients and wholesome goodness. Bursting with flavors and colors, these produce items are cultivated without synthetic pesticides or chemicals, preserving their innate richness and nutritional value. From crisp, leafy greens to juicy, ripe fruits, their freshness invigorates the palate and nourishes the body, offering a delightful symphony of taste and health benefits. Embracing these natural treasures not only supports a sustainable lifestyle but also promotes well-being, offering a delicious way to savor the goodness of the earth.
+                        </p>
+                        <a class="btn more" id="more1">read more</a>
                     </div>
                 </div>
 
-                <div class="box">
+                <div class="box morebox">
                     <img src="image/blog-2.jpg" alt="blog image 2">
                     <div class="content">
                         <div class="icons">
                             <a href="#"><i class="fa fa-user"></i> By Zen Mado </a>
                             <a href="#"><i class="fa fa-calendar"></i> 22nd Dec , 2022 </a>
                         </div>
                         <h3> Vegetable Storage , Do's and Don'ts </h3>
-                        <p>Fresh vegetables are those that have been recently harvested and have not been stored for a long period of time.</p>
-                        <a href="#" class="btn">read more</a>
+                        <p id="description2">Proper vegetable storage is a crucial aspect of maintaining their freshness and nutritional value. Creating an optimal environment involves a delicate balance of factors. Vegetables benefit from cool, dry places, such as a refrigerator's crisper drawer or a well-ventilated pantry. It's essential to separate ethylene-producing fruits from ethylene-sensitive vegetables to prevent premature ripening. While ensuring good airflow with perforated bags or containers, some veggies like carrots and celery thrive with a bit of moisture, but excessive dampness can lead to spoilage. Regularly checking for signs of spoilage and rotating vegetables for use in the 'first in, first out' method helps in minimizing waste and ensures the freshest produce reaches the table. Overall, these simple practices can significantly extend the lifespan of vegetables, preserving their flavors and nutrients for delicious and nutritious meals.</p>
+                        <a class="btn more" id="more2">read more</a>
                     </div>
                 </div>
 
-                <div class="box">
+                <div class="box morebox">
                     <img src="image/blog-3.jpg" alt="blog image 3">
                     <div class="content">
                         <div class="icons">
                             <a href="#"><i class="fa fa-user"></i> By Zoro Uzumaki </a>
                             <a href="#"><i class="fa fa-calendar"></i> 29th Feb , 2022 </a>
                         </div>
                         <h3> Era of Organic Vegetables ,  A new Begining </h3>
-                        <p>Organic vegetables are often higher in nutrients than conventionally grown vegetables, and they may also contain fewer pesticides and other chemicals.</p>
-                        <a href="#" class="btn">read more</a>
+                        <p id="description3">The era of organic vegetables marks a powerful shift towards sustainable, environmentally conscious farming practices. This new beginning signifies a return to nature's wisdom, rejecting synthetic pesticides and chemicals in favor of nurturing the soil and crops naturally. It's a movement driven by a profound respect for the Earth, prioritizing biodiversity, soil health, and ecosystem balance. Embracing organic farming methods not only produces healthier, pesticide-free vegetables but also promotes the well-being of farmers and consumers alike. This resurgence in organic agriculture represents a commitment to healthier food choices, fostering a harmonious relationship between humans and the environment, and paving the way for a greener, more sustainable future.
+                        </p>
+                        <a class="btn more" id="more3">read more</a>
                     </div>
                 </div>
-
             </div>
             <h1 class="heading" style="font-size: 3rem;"> <a href="blog/blog.html" target="_blank" style="color: rgb(8, 8, 75);">Read More <span> -> </span></a></h1>
         </section>
@@ -696,7 +697,10 @@ <h1 class="heading">&#127775; Author Details &#127775;</h1>
         <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
 
         <!-- <script src="authorscript.js"></script> -->
-
+
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+
+        <script src="js/readmore.js"></script>
 
     </body>
 

js/readmore.js

@@ -0,0 +1,21 @@
+$(document).ready(function(){
+    $(".box").each(function(index){
+        var id = index + 1;
+        var fullDescription = $("#description" + id).text();
+        var shortDescription = fullDescription.substring(0, 100) + '...';
+
+        $("#description" + id).text(shortDescription);
+
+        $("#more" + id).click(function(){
+            if($(this).text() === "read more"){
+                $("#description" + id).text(fullDescription);
+                $(".box").eq(index).addClass("expanded");
+                $(this).text("read less");
+            } else {
+                $("#description" + id).text(shortDescription);
+                $(".box").eq(index).removeClass("expanded");
+                $(this).text("read more");
+            }
+        });
+    });
+});

js/script.js

@@ -54,3 +54,10 @@ windows.onscroll = () =>
 //     .from(".categories", {opacity:0, y:10})
 //     .from(".review", {opacity:0, y:10})
 //     .from(".blogs", {opacity:0, y:10})
+// let more = document.querySelectorAll('.more');
+
+// for (let i=0; i<more.length; i++){
+//  more[i].addEventListener('click',function(){
+//      more[i].parentNode.classList.toggle('active');
+//  });
+// }