【html/CSS/jQuary】「続きを読む」ボタンをクリックすると「閉じる」ボタンになるようにしたい

Question

実現したいこと

「続きを読む」ボタンをクリックすると、「続きを読む」が「閉じる」に替わるようにしたいです。

発生している問題・分からないこと

コードの記述方法が分かりません。

該当のソースコード

<section id="sample">
<div class="case">
        <div class="more-btn js-title">
          <span class="next">続きを読む</span>
          <span class="close">閉じる</span>
        <div class="inner">
              <p>
                内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。
              </p>
        </div>
      </div>
  </section>

#sample .more-btn .next {
  display: block;
}

#sample .more-btn .close {
  display: none;
}

#sample .more-btn .on-click .next {
  display: none;
}

#sample .more-btn .on-click .close {
  display: block;
}

$(function () {
$(".more-btn").on("click", function() {
  $(this).toggleClass("on-click");
});
});

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

テキストがかわらず、かつレイアウトが崩れてしまいました。
どうぞよろしくお願いいたします。

補足

特になし

Answer 1

#sample .more-btn .on-click .next {
...
#sample .more-btn .on-click .close {

.more-btn と .on-click の間の空白を消してください。CSSセレクタで空白の有無は重要です。いまのセレクタだと「more-btn クラスを持つ要素の on-click クラスを持つ子孫要素の…」となってしまいます。

Comments

[takayuiyui]

ご回答ありがとうございます！！
問題が解決しました！ベストアンサーに選ばせていただきました。
空白の重要性について、知りませんでしたので、とても勉強になりました。
誠にありがとうございました！！