From ca59217e49ade158faa9cf248b3f4b14203bb1e6 Mon Sep 17 00:00:00 2001 From: = Date: Fri, 1 Dec 2023 18:46:17 +0530 Subject: [PATCH] Read more option added --- css/review.css | 2 +- css/style.css | 15 +++++++++++++++ index.html | 26 +++++++++++++++----------- js/readmore.js | 21 +++++++++++++++++++++ js/script.js | 7 +++++++ 5 files changed, 59 insertions(+), 12 deletions(-) create mode 100644 js/readmore.js diff --git a/css/review.css b/css/review.css index 63d9210..a8a81de 100644 --- a/css/review.css +++ b/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; } */ \ No newline at end of file diff --git a/css/style.css b/css/style.css index aa754df..4d57b8d 100644 --- a/css/style.css +++ b/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 diff --git a/index.html b/index.html index 31f4e65..1e50657 100644 --- a/index.html +++ b/index.html @@ -444,7 +444,7 @@

📝 our blogs

-
+
blog image 1
@@ -452,12 +452,13 @@

📝 our blogs

1st May , 2021

fresh and organic vegetables and fruits

-

Organic vegetables are those that are grown without the use of synthetic pesticides, herbicides, fertilizers, or other chemicals.

- read more +

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. +

+ read more
-
+
blog image 2
@@ -465,12 +466,12 @@

fresh and organic vegetables and fruits

22nd Dec , 2022

Vegetable Storage , Do's and Don'ts

-

Fresh vegetables are those that have been recently harvested and have not been stored for a long period of time.

- read more +

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.

+ read more
-
+
blog image 3
@@ -478,11 +479,11 @@

Vegetable Storage , Do's and Don'ts

29th Feb , 2022

Era of Organic Vegetables , A new Begining

-

Organic vegetables are often higher in nutrients than conventionally grown vegetables, and they may also contain fewer pesticides and other chemicals.

- read more +

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. +

+ read more
-

Read More ->

@@ -696,7 +697,10 @@

🌟 Author Details 🌟

- + + + + diff --git a/js/readmore.js b/js/readmore.js new file mode 100644 index 0000000..e0f4eb3 --- /dev/null +++ b/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"); + } + }); + }); +}); \ No newline at end of file diff --git a/js/script.js b/js/script.js index faf4ed5..aaacb8e 100644 --- a/js/script.js +++ b/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