Как создать несколько кнопок «Читать больше и меньше» для одной и той же страницы?

Question

Я работаю над довольно большим проектом, и у меня проблемы с кнопками «Читать дальше», я совсем новичок в javascript и все еще пытаюсь осмыслить его. У меня есть функция, которая работает для первой кнопки, но она не работает для остальных. Подскажите, пожалуйста, что я делаю не так?

$(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>

Это работает для первого абзаца, но не для второго, вы можете сказать мне, почему или есть лучший способ сделать это. Спасибо

Answer 1

Я думал о другом подходе, возможно, используя вкладки в JS. Я отредактировал фрагмент с учетом вашего фактического содержания, чтобы вы могли видеть, как он отображается. Ссылка здесь: 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>

Answer 2

Прежде всего - не используйте один и тот же id несколько раз. Я имею в виду id="read" - дублирование ошибочно. Во-вторых - структуру элементов нужно больше разделять. Каждый логический блок должен быть покрыт собственным родительским элементом. Попробуйте это:

$(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>