Solution 1 :

I was thinking of a different approach, maybe using tabs in JS.
I edited the snippet with your actual content so you can see how it is displayed. Reference here:
https://www.w3schools.com/howto/howto_js_tabs.asp

function openDef(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
<div class="tab">
  <button class="tablinks" onclick="openDef(event, 'Sighthounds')">Sighthounds</button>
  <button class="tablinks" onclick="openDef(event, 'Origin')">Origin</button>
</div>

<div id="Sighthounds" class="tabcontent">
  <h3>Sighthounds</h3>
    <h3>The Sighthounds</h3>
      <p>
      By definition, a sighthound is simply a dog breed that hunts primarily by 
      sight and speed rather than by scent because of this they are sometimes 
      refered to as Gazehounds. Because sighthounds hunt by sight, they need to 
      have the speed and agility to keep up with their prey in order to keep 
      them in sight. Sighthound breeds typically have lean bodies, long legs, 
      and a flexible back – they also have deep chests to support their 
      unusually large hearts and lungs. To help you picture the typical 
      sighthound body, here is a list of breeds that are categorized as 
      sighthounds:

    <h4>Afghan Hound:</h4>
      <p>
      Wow very biscit stop it fren very hand that feed shibe heckin, many 
      pats. Shooberino h*ck blep shoob sub woofer very taste wow shoober, 
      snoot heckin mlem smol borking doggo with a long snoot for pats. Heck 
      I am bekom fat pupperino borkdrive length boy, such treat maximum 
      borkdrive wow very biscit. Borking doggo clouds much ruin diet 
      pupperino tungg super chub, very hand that feed shibe you are doin me 
      a concern boofers

      <span class="dots">...</span>
</div>

<div id="Origin" class="tabcontent">
  <h3>Origin</h3>
    <h5>Origin</h5>
      <p>
      Doggo ipsum smol borking doggo with a long snoot for pats bork mlem 
      heckin much ruin diet lotsa pats I am bekom fat, doing me a frighten most 
      angery pupper I have ever seen pats waggy wags vvv. big ol pupper big ol. 
      Ur givin me a spook smol borking doggo with a long snoot for pats big ol 
      pupper long bois ur givin me a spook bork smol adorable doggo, the 
      neighborhood pupper doing me a frighten puggorino tungg ur givin me a 
      spook. Blep the neighborhood pupper heckin good boys big ol pupper noodle 
      horse, doge big ol blep. noodle horse shibe maximum borkdrive. Bork you 
      are doing me a frighten boof pats, noodle horse extremely cuuuuuute you 
      are doing me the shock borkf, boof borkf.
     </p>

    <h4>Azwakah:</h4>
      <p>
      Wow very biscit stop it fren very hand that feed shibe heckin, many pats. 
      Shooberino h*ck blep shoob sub woofer very taste wow shoober, snoot 
      heckin mlem smol borking doggo with a long snoot for pats. Heck I am 
      bekom fat pupperino borkdrive length boy, such treat maximum borkdrive 
      wow very biscit. Borking doggo clouds much ruin diet pupperino tungg 
      super chub, very hand that feed shibe you are doin me a concern 
      boofers
      <span class="dots">...</span> 
</div>

Solution 2 :

First of all – do not use same id multiple times. I mean id="read" – duplicating is mistake. Secondly – the structure of elements need to be more separated. Each logical block should be covered in with it’s own parent element. Try this:

$(document).ready(function(){
   $(".read").click(function(){
      $(this).parent().find('.showmore').toggle();
        if($(this).text() =='Read More'){
          $(this).text('Read Less');
        }
        else{
          $(this).text('Read More');
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle-container">
  <div class="first">
    <h3>The Sighthounds</h3>
    <p>
    By definition, a sighthound is simply a dog breed that hunts primarily by 
    sight and speed rather than by scent because of this they are sometimes 
    refered to as Gazehounds. Because sighthounds hunt by sight, they need to 
    have the speed and agility to keep up with their prey in order to keep 
    them in sight. Sighthound breeds typically have lean bodies, long legs, 
    and a flexible back – they also have deep chests to support their 
    unusually large hearts and lungs. To help you picture the typical 
    sighthound body, here is a list of breeds that are categorized as 
    sighthounds:
    </p>
    <span class="dots">...</span>
  </div>
  <div class="showmore" style="display: none;">
   <h5>Origin</h5>
   <p>
    Doggo ipsum smol borking doggo with a long snoot for pats bork mlem 
    heckin much ruin diet lotsa pats I am bekom fat, doing me a frighten most 
    angery pupper I have ever seen pats waggy wags vvv. big ol pupper big ol. 
    Ur givin me a spook smol borking doggo with a long snoot for pats big ol 
    pupper long bois ur givin me a spook bork smol adorable doggo, the 
    neighborhood pupper doing me a frighten puggorino tungg ur givin me a 
    spook. Blep the neighborhood pupper heckin good boys big ol pupper noodle 
    horse, doge big ol blep. noodle horse shibe maximum borkdrive. Bork you 
    are doing me a frighten boof pats, noodle horse extremely cuuuuuute you 
    are doing me the shock borkf, boof borkf.
   </p>
  </div>
  <button type="button" class="read btn btn-info btn-xs">Read More</button>
</div>

<div class="toggle-container">
  <div class="first">
    <h3>The Sighthounds</h3>
    <p>
    By definition, a sighthound is simply a dog breed that hunts primarily by 
    sight and speed rather than by scent because of this they are sometimes 
    refered to as Gazehounds. Because sighthounds hunt by sight, they need to 
    have the speed and agility to keep up with their prey in order to keep 
    them in sight. Sighthound breeds typically have lean bodies, long legs, 
    and a flexible back – they also have deep chests to support their 
    unusually large hearts and lungs. To help you picture the typical 
    sighthound body, here is a list of breeds that are categorized as 
    sighthounds:
    </p>
    <span class="dots">...</span>
  </div>
  <div class="showmore" style="display: none;">
   <h5>Origin</h5>
   <p>
    Doggo ipsum smol borking doggo with a long snoot for pats bork mlem 
    heckin much ruin diet lotsa pats I am bekom fat, doing me a frighten most 
    angery pupper I have ever seen pats waggy wags vvv. big ol pupper big ol. 
    Ur givin me a spook smol borking doggo with a long snoot for pats big ol 
    pupper long bois ur givin me a spook bork smol adorable doggo, the 
    neighborhood pupper doing me a frighten puggorino tungg ur givin me a 
    spook. Blep the neighborhood pupper heckin good boys big ol pupper noodle 
    horse, doge big ol blep. noodle horse shibe maximum borkdrive. Bork you 
    are doing me a frighten boof pats, noodle horse extremely cuuuuuute you 
    are doing me the shock borkf, boof borkf.
   </p>
  </div>
  <button type="button" class="read btn btn-info btn-xs">Read More</button>
</div>

Problem :

I’m working on a fairly large project and i’m having trouble with the read more buttons, i’m very new to javascript and still trying to get my head around it. I have got the function to work for the first button but it doesn’t work for the others, can you tell me what i’m doing wrong please.

$(document).ready(function() {
  $("#read").click(function() {
    $(this).prev().toggle();
    $(this).siblings('.dots').
    toggle("read");
    if ($(this).text() == 'Read More') {
      $(this).text('Read Less');
    } else {
      $(this).text('Read More');
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>The Hound Group</h1>
<div class="container">
  <h3>The Sighthounds</h3>
  <p>
    By definition, a sighthound is simply a dog breed that hunts primarily by sight and speed rather than by scent because of this they are sometimes refered to as Gazehounds. Because sighthounds hunt by sight, they need to have the speed and agility to keep
    up with their prey in order to keep them in sight. Sighthound breeds typically have lean bodies, long legs, and a flexible back – they also have deep chests to support their unusually large hearts and lungs. To help you picture the typical sighthound
    body, here is a list of breeds that are categorized as sighthounds:

    <h4>Afghan Hound:</h4>
    <p>
      Wow very biscit stop it fren very hand that feed shibe heckin, many pats. Shooberino h*ck blep shoob sub woofer very taste wow shoober, snoot heckin mlem smol borking doggo with a long snoot for pats. Heck I am bekom fat pupperino borkdrive length boy,
      such treat maximum borkdrive wow very biscit. Borking doggo clouds much ruin diet pupperino tungg super chub, very hand that feed shibe you are doin me a concern boofers
      <span class="dots">...</span>

      <div class="showmore">
        <h5>Origin</h5>
        Doggo ipsum smol borking doggo with a long snoot for pats bork mlem heckin much ruin diet lotsa pats I am bekom fat, doing me a frighten most angery pupper I have ever seen pats waggy wags vvv. big ol pupper big ol. Ur givin me a spook smol borking doggo
        with a long snoot for pats big ol pupper long bois ur givin me a spook bork smol adorable doggo, the neighborhood pupper doing me a frighten puggorino tungg ur givin me a spook. Blep the neighborhood pupper heckin good boys big ol pupper noodle
        horse, doge big ol blep. noodle horse shibe maximum borkdrive. Bork you are doing me a frighten boof pats, noodle horse extremely cuuuuuute you are doing me the shock borkf, boof borkf.
    </p>
    </div>
    <button type="button" id="read" class="btn btn-info btn-xs">Read More</button>

    <h4>Azwakah:</h4>
    <p>
      Wow very biscit stop it fren very hand that feed shibe heckin, many pats. Shooberino h*ck blep shoob sub woofer very taste wow shoober, snoot heckin mlem smol borking doggo with a long snoot for pats. Heck I am bekom fat pupperino borkdrive length boy,
      such treat maximum borkdrive wow very biscit. Borking doggo clouds much ruin diet pupperino tungg super chub, very hand that feed shibe you are doin me a concern boofers
      <span class="dots">...</span>

      <div class="showmore">
        <h5>Origin</h5>
        Doggo ipsum smol borking doggo with a long snoot for pats bork mlem heckin much ruin diet lotsa pats I am bekom fat, doing me a frighten most angery pupper I have ever seen pats waggy wags vvv. big ol pupper big ol. Ur givin me a spook smol borking doggo
        with a long snoot for pats big ol pupper long bois ur givin me a spook bork smol adorable doggo, the neighborhood pupper doing me a frighten puggorino tungg ur givin me a spook. Blep the neighborhood pupper heckin good boys big ol pupper noodle
        horse, doge big ol blep. noodle horse shibe maximum borkdrive. Bork you are doing me a frighten boof pats, noodle horse extremely cuuuuuute you are doing me the shock borkf, boof borkf.
    </p>
    </div>
    <button type="button" id="read" class="btn btn-info btn-xs">Read More</button>

It works for the first paragraph but not the second, can you tell me why or if there is a better way of doing this.
Thank you

By

Leave a Reply

Your email address will not be published. Required fields are marked *