Follow along with the video below to see how to install our site as a web app on your home screen.
Note: This feature may not be available in some browsers.
Welcome to Code Forum!
Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.
This is what I understand since you did not mentioned your layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Center</title>
</head>
<body>
<div class="main" style="width:100%; height:100vh;display:flex; justify-content:center; align-items:center">...
On your each update you are changing your code. Replace the below code and see if it works.
<header class="woocommerce-products-header">
<h1 class="woocommerce-products-header__title page-title">Dining</h1>
<div class="term-description">
<p><span...
Change a tag and div to this -
<a style="cursor: pointer" id="collapsible-article-toggle" onclick="myFunction()">Show More</a>
<div id="collapsible-article" style="display: none; height: auto;width: 100%;overflow: hidden;margin-bottom: 25px">
Change your a tag and div with the code that I have posted before. Than paste the script below that closing div tag. If you will not call the function in your a tag than how will the script will work.
Before you add the script, just tell me where is the closing div of id collapsible-article? Take screenshot and paste the image. Don't forget to mark the closing div tag.
Cut the script from there and paste that below the collapsible-article div. Like below -
<a style="cursor: pointer" id="collapsible-article-toggle" onclick="myFunction()">Show More</a></span></p>
<div id="collapsible-article" style="display: none; height: auto;width: 100%;overflow...
Don't change anything. Just change the a tag with id collapsible-article-toggle and the div with id collapsible-article than add the script below collapsible-article id div.
Which part you actually want to hide? I have already tried the code I have posted above. It will hide all the texts below Show More button and above your product listings. Capture screen shot of your page and mark the parts which you want to hide/show and post the image.
I think you have deleted the script that makes it visible or hidden. You can check the previous code which was working.
Or try to change this html -
<a style="cursor: pointer" id="collapsible-article-toggle" onclick="myFunction()">Show More</a></span></p>
<div id="collapsible-article"...
You already have the code, just add it. And after that if you still stuck and get confused, just paste the whole code, html and css, we will try to solve it.
I just designed it what I could understand. You can change it as you want. Don't put you code outside html tag.
HTML -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>...