1

I am trying to put a read more button into all my pages but it's not quite working properly. It shows all the text initially, then when it's clicked once it works properly. Can someone please tell me what i'm doing wrong? I'd also like to know how to format the look of the button too please.

The page is here - https://ffe-dev.flowersforeveryone.co.za/sea-point-flower-delivery/

I am using the following code in HTML - 

    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";
      }
    }
  .moretext{
      display: none;
    }
 <div class = "textcontainer">
    <br>
    <br>
    <H3> SHOW YOUR LOVE WITH FLOWERS </H3>
    <p>
    <br>
    When you send flowers, it’s a deeply personal gesture of affection, we realise this well. Receiving a gift of flowers is intensely memorable to someone, because it makes them feel very special and loved. Flowers For Everyone gives you the assurance that we get it right, every time.
    <br>
    <br>
    <span id="dots"></span><span id="more">
    We have a striking range of luxury flower bouquets freshly cut & hand-delivered across the Western Cape province; from Sea Point with its breathtaking sea views and trendy restaurants, to the Cape winelands and beyond, we put smiles to faces. 
    <br>
    <br>
    </span></p>
    </div>
    
    <button onclick="myFunction()" id="myBtn">More...</button>
J.C
  • 632
  • 1
  • 10
  • 41
Michelle
  • 549
  • 1
  • 5
  • 25
  • 1
    You made a typo `more` and `moretext` are not the same – Quentin Aug 20 '19 at 15:14
  • 2
    **Warning**: `
    ` is not a substitute for margins!     – Quentin Aug 20 '19 at 15:14
  • 2
    **Warning**: Writing text in ALL CAPS can lead to screen readers treating it like an initialism and spelling it out, letter by letter. Write normally and use CSS's `text-transform` to control how it looks. – Quentin Aug 20 '19 at 15:15
  • 1
    **Warning**: `
    ` is not a substitute for `

    `. If you have multiple paragraphs then write multiple paragraphs. Don't write one paragraph with lots of double line beaks in it.

     – Quentin Aug 20 '19 at 15:16
  • 1
    Three full stops (`...`) is not the same as a horizontal ellipsis (`…`) even if it looks visually similar. If you can't type … on your keyboard, then look to HTML's `…` entity. – Quentin Aug 20 '19 at 15:17
  • Thanks.. I'll look into all these things – Michelle Aug 20 '19 at 15:25

1 Answers1

1

You can should add class="moretext" to your span this way the text will be hidden initaly like this

<span id="more" class="moretext">

In the css add the floowing lines padding: 0; border: none; like this for your button

#myBtn
{
padding: 0;
border: none; like this
}

Answer can be found here Remove border from buttons

J.C
  • 632
  • 1
  • 10
  • 41