Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML Show Less

C

Cmackintosh1

Coder
Hello

We used to have the show more option which expanded the text field working on our site but it doesn't work, can you assist with recommendations?

[CODE lang="html" title="Show Less"]These occasions often morph into memories that we carry with us for years, of good times shared over good food, better company, and the best wine.
<a id="collapsible-article-toggle" href="#">Show More</a>
<div id="collapsible-article" style="height: auto;width: 100%;overflow: hidden;margin-bottom: 25px">

<h2>Create a New Mood in Your Dining Room with a Hamptons-Style Dining Set</h2>[/CODE]
 
Sort by date Sort by votes
The show more/show less to controled via JavaScript. Here's an example:
Code: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="main.css">
    <title>My Site</title>
    <style>
      #more {display: none;}
    </style>
</head>
<body>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>

<button onclick="myFunction()" id="myBtn">Read more</button>


<script>
  function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}
</script>
</body>
</html>
 
Upvote 0 Downvote
Thank you so much for the reply!!

When I add text in it doesn't work.

See the web link below, the show less text doesn't work. it used to work but stopped working. When you load the page it normally didn't have all the text shown then you click show more to view more text.

Dining - LM Home Interiors

LM Home Interiors Living range includes sofas, accent chairs, side and coffee tables, media units, storage furniture, ottomans and more. A Hamptons-style dining set is a perfect option for reimagining your home’s dining and entertaining space. There’s something timeless and laidback (yet...
lmhomeinteriors.com.au lmhomeinteriors.com.au

If you can assist that would be AMAZING!
 
Upvote 0 Downvote
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 -
HTML: 
<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: hidden;margin-bottom: 25px">
And add this script below collapsible-article div or inside your js file -
JavaScript: 
<script>
    var show_button = document.getElementById("collapsible-article-toggle");
    var show_article = document.getElementById("collapsible-article");

    function myFunction() {
        if(show_article.style.display === "none"){
            show_button.innerHTML = "Show Less";
            show_article.style.display = "block";
        } else {
            show_button.innerHTML = "Show More";
            show_article.style.display = "none";
        }
    }
</script>
 
Upvote 0 Downvote
Hi! Thank you again for your support but I have tried to add the above in and it still doesn't work. The below text is currently in the Category text under Products in Wordpress. Below is what is currently there, are you able to rewrite what needs to go in?

LM Home Interiors Living range includes <a href="https://lmhomeinteriors.com.au/product-category/living/couches-and-sofas/">sofas</a>, <a href="https://lmhomeinteriors.com.au/product-category/living/armchairs-and-ottomans/">accent chairs</a>, <a href="https://lmhomeinteriors.com.au/product-category/living/side-tables/">side</a> and <a href="https://lmhomeinteriors.com.au/product-category/living/coffee-tables/">coffee tables</a>, <a href="https://lmhomeinteriors.com.au/product-category/living/entertainment-units/">media units</a>, <a href="https://lmhomeinteriors.com.au/product-category/living/cabinets-and-bookcases/">storage furniture</a>, ottomans and more. A Hamptons-style dining set is a perfect option for reimagining your home’s dining and entertaining space. There’s something timeless and laidback (yet simultaneously elegant) about a dinner with good friends or beloved family members. These occasions often morph into memories that we carry with us for years, of good times shared over good food, better company, and the best wine.

<a id="collapsible-article-toggle" href="#">Show More</a>
<div id="collapsible-article" style="height: auto; width: 100%; overflow: hidden; margin-bottom: 25px;">
<h2>Create a New Mood in Your Dining Room with a Hamptons-Style Dining Set</h2>
At LM Home Interiors, we dedicate ourselves to helping our customers find a dining set as timeless, laidback, and elegant as their favourite dinnertime memories. A Hamptons dining table and chairs is, in our opinion, the very best way to achieve this ambience.
<h2>Some Interesting Facts about Hamptons-Style Décor</h2>
What makes a Hampton-style dining table and chairs the ideal setup for your home dining room or kitchen? To answer that question, it’s important to understand what Hamptons style is. Here are some fun facts to explain:
<ul>
<li><strong>Where is the Hamptons?</strong> The Hamptons is a group of villages in Long Island, New York. This area is known as a summertime escape for affluent individuals, many of them New York City residents who spend the warmer months at mansions on the beach. Fittingly, Hamptons-style décor is beachy, coastal, summery, and relaxed, yet also as luxurious as you would think a house in an affluent summer getaway would be.</li>
<li><strong>Hamptons furniture often carries a light, bright or neutral colour palette.</strong> At LM Home Interiors, our Hamptons-style dining sets are teak indoor-outdoor tables with wicker or linen chairs. Bright, neutral, and earthy tones such as white, brown, and grey reign supreme in Hamptons style—though navy and blue hues often add to the coastal, waterside feel.</li>
<li><strong>It’s not just about the furniture.</strong> The right dining set or living room furniture can anchor a Hamptons-style home, but the location and architecture of the house itself does a lot of the work, too. Coastal properties are a good fit for this style of décor, but just as important is having a bright space with many windows and natural light or light timber floors and cabinetry.</li>
</ul>
<h3><strong>What You Can Expect from LM Home Interiors Regarding Your Hamptons-Style Dining Set</strong></h3>
When you shop with LM Home Interiors for your Hamptons dining table and chairs, you can expect us to go above and beyond to get the right look and feel for your dream dining room setup. This approach includes:
<ul>
<li><strong>Carefully crafted furniture. </strong>Our pieces are not mass-produced or cheaply made. Everything we carry is carefully handcrafted and finished, to deliver the type of luxury atmosphere you’d expect from a Hamptons house.</li>
<li><strong>More than just the furniture. </strong>We’re here to help you create a cohesively-themed space. That process starts with the furniture itself, but it may also involve lamps and lighting, rugs, artwork, or other homewares. <a href="https://lmhomeinteriors.com.au/product-category/homewares/view-all-homewares/">Check out what we have to offer in this regard</a>.</li>
<li><strong>Non-Hamptons prices. </strong>The Hamptons are known for their affluent residents, which means Hamptons-style décor is often equated with expense. We’ve gone to great lengths to keep our products priced fairly so that you can get that elegant look without the luxury price tag.</li>
</ul>
<h4><strong>About LM Home Interiors</strong></h4>
We got our start three years ago, intending to help our customers achieve everyday beautiful living. Since then, we’ve built a reputation for our gorgeous handmade pieces, our helpful customer service, and our dedication to helping our buyers create elegant themes for their spaces. If what you’re after is a Hamptons theme, then we’re with you every step of the way. Set your next share of dinnertime memories in the perfect space, with a Hampton-style dining table and chairs. <a href="https://lmhomeinteriors.com.au/get-in-touch/">Contact us today to get started</a>.

</div>
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
I want the text below Show more to hide when the page is loaded and when you click the Show More the text comes up. Could it be some other code in our website which is stopping this from happening? When I tried that code it didn't work. If you are able to rewrite code and I can copy and paste to see if that works. Thank you again for all your help you are amazing!!!!
 
Upvote 0 Downvote
BGB said:
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 -
HTML: 
<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: hidden;margin-bottom: 25px">
And add this script below collapsible-article div or inside your js file -
JavaScript: 
<script>
    var show_button = document.getElementById("collapsible-article-toggle");
    var show_article = document.getElementById("collapsible-article");

    function myFunction() {
        if(show_article.style.display === "none"){
            show_button.innerHTML = "Show Less";
            show_article.style.display = "block";
        } else {
            show_button.innerHTML = "Show More";
            show_article.style.display = "none";
        }
    }
</script>
Click to expand...
This code. You can also see in video.
 
Upvote 0 Downvote
I added the script below collapsible-article id.
HTML: 
<div id="collapsible-article" style="display: none; height: auto;width: 100%;overflow: hidden;margin-bottom: 25px">
    <!-- other code(s) -->
</div>
<script>
    var show_button = document.getElementById("collapsible-article-toggle");
    var show_article = document.getElementById("collapsible-article");

    function myFunction() {
        if(show_article.style.display === "none"){
            show_button.innerHTML = "Show Less";
            show_article.style.display = "block";
        } else {
            show_button.innerHTML = "Show More";
            show_article.style.display = "none";
        }
    }
</script>
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Cut the script from there and paste that below the collapsible-article div. Like below -
HTML: 
<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: hidden;margin-bottom: 25px">
    <!-- Your other code(s) -->
</div>
<script>
    var show_button = document.getElementById("collapsible-article-toggle");
    var show_article = document.getElementById("collapsible-article");

    function myFunction() {
        if(show_article.style.display === "none"){
            show_button.innerHTML = "Show Less";
            show_article.style.display = "block";
        } else {
            show_button.innerHTML = "Show More";
            show_article.style.display = "none";
        }
    }
</script>
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom