I need to add toggle view button on product page to the description section

[ithinkdifferent]

I need to add toggle view button on product page to the description section because their are so much details on the page and i need to hide the half details with view all button. Please check it out below image i just need the same function in my dawn theme version 12. my site URL is https://www.jewelparadise.shop i need this function on my description section on a product page. your help will be appreciated. thank you

[joehustle]

In your Dawn theme's product.liquid template, locate the section dedicated to displaying the product description. Look for tags like <p> or classes/IDs targeting the description area.

Insert:
HTML
<div class="product-description">
<p class="description-excerpt">This is a shorter excerpt of your product description. Click "Read More" to see the full details.</p>
<a href="#" class="read-more-button">Read More</a>
</div>

CSS

.product-description {
max-height: 200px; /* Adjust this value to your desired initial height */
overflow: hidden;
}
.description-excerpt {
display: block;
}
.read-more-button {
display: block;
text-decoration: none;
margin-top: 10px;
}
.read-more-button:hover {
text-decoration: underline;
}

.product-description.expanded {
max-height: none;
}

JAVASCRIPT
const readMoreButton = document.querySelector('.read-more-button');
readMoreButton.addEventListener('click', function() {
const description = document.querySelector('.product-description');
description.classList.toggle('expanded');
});

[ithinkdifferent]

I couldn't find product.liquid template but i try to add the following code in main.product liquid and it aslo doesn't work. please suggest what should i do? thank you

[joehustle]

Dawn theme utilizes various sections within the "templates/product.liquid" file to build different parts of the page. Pick the one you are interested in

[beauxbreaux]

The main.product.liquid is the correct files. 

I notice some differences in your file that is a bit different than most Dawn themes and I can't seem to replicate it. Essentially the class name for you description is 'rte'. This usually has the class product__description as well but is missing. Hopefully this works for you. Got it working just fine with the dawn theme I have on file. 

As always download a back-up of your theme to make sure you have a fallback. Currently it looks like you are already working with a copy so you may have already done this. The part where is says:

const initialHeight = 500;

You can  adjust this number to show more pixels. You may need something around 700 or 800 but just try different numbers to see what looks the best for hidden pixels. 

Here is the code:

<script>
document.addEventListener("DOMContentLoaded", function () {
  // Set the initial height for the long description
  const longDescription = document.querySelector(".rte");

  const initialHeight = 500;
  longDescription.style.height = `${initialHeight}px`;
  longDescription.style.overflow = `hidden`;

  function toggleDescription() {
    const isExpanded = longDescription.style.height === "auto" || longDescription.style.height === "";

    if (isExpanded) {
      // If currently expanded, collapse
      longDescription.style.height = `${initialHeight}px`;
      readMoreButton.textContent = "View more";
    } else {
      // If currently collapsed, expand to full height
      longDescription.style.height = "auto";
      readMoreButton.textContent = "View less";
    }
  }

  // Create the "Read more" button dynamically
  const readMoreButton = document.createElement("div");
  readMoreButton.classList.add("read-more");
  readMoreButton.textContent = "View more";
  readMoreButton.style.cursor = "pointer"; // Add pointer cursor
  readMoreButton.addEventListener("click", toggleDescription);

  // Append the "Read more" button after the long-description
  longDescription.insertAdjacentElement("afterend", readMoreButton);
});

  
</script>

 This is where you put it inside your main.product file (right inside your </section> closing tag at towards the bottom. The closing section tag should be right above the {%schema%}:

[ithinkdifferent]

i did exactly but the code is not working? did you checked?

thank you for your response.