سلام دوستان . امیدوارم که حالتون خوب باشه. در صفحه مطالب برای خواندن بیشتر از دکمه استفاده کردم (البته چند مطلب در یک صفحه ) برای اینکه هردکمه عملکرد خودشو داشته باشه و زمانی که روی هر دکمه کلیک شد مربوط به همون مطلب باشه از دستور زیر استفاده کردم. ولی نمیدونم چرا اجرا نمیشه:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>JQUERY proj</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
        $(".btn").click(function(event){
          var x = $(this).text();
          if(x == 'Read More'){
            $(this).text("Read Less");
            $(this).parent(".show-details").find(".show-me").slideDown();
          }else{
            $(this).text("Read More");
            $(this).parent(".show-details").find(".show-me").slideUp();
          }
        });

    </script>
  </head>
  <body>
    <div class="show-details">
      <h2>Title My Post</h2>
      <div class="show-me">
        lorem ipsum is something text.
        lorem ipsum is something text.
        lorem ipsum is something text.
        lorem ipsum is something text.lorem ipsum is something text.
      </div>
      <button class="btn" name="button">Read More</button>
    </div>

    <div class="show-details">
      <h2>Title My Post2</h2>
      <div class="show-me">
        lorem ipsum is something text.
        lorem ipsum is something text.
        lorem ipsum is something text.
        lorem ipsum is something text.lorem ipsum is something text.
      </div>
      <button class="btn" name="button">Read More</button>
    </div>

    <div class="show-details">
      <h2>Title My Post3</h2>
      <div class="show-me">
        lorem ipsum is something text.
        lorem ipsum is something text.
        lorem ipsum is something text.
        lorem ipsum is something text.lorem ipsum is something text.
      </div>
      <button class="btn" name="button">Read More</button>
    </div>
  </body>
</html>

صفحه style.css :

.show-me{
  background:#e1e1e1;
  padding:12px;
  margin:8px;
  font-size: 14px;
  font-family: monospace;
  border-radius:5px;
  display:none;
}

تا اونجایی که میدونم درسته . حتی مجدد ویدیوهای آموزشی مربوط به دستور رو هم دیدم ولی کماکان نتیجه نمیگیرم!