jQuery addClass example

Change class name on click in jQuery

HTML

<div class="contents_ttl">
  タイトル
</div>
<div id="main" class="contents_box">
  <ul>
    <li>
      <div class="txt">aaaaa</div>
    </li>
    <li>
      <div class="txt">bbbbb</div>
    </li>
    <li>
      <div class="txt">ccccc</div>
    </li>
    <li>
      <div class="txt">ddddd</div>
    </li>
    <li class="appear">
      <ul>
        <li>
          <div class="contents_ttl">
            タイトル
          </div>
        </li>
        <li>
          <div class="txt">eeeee</div>
        </li>
        <li>
          <div class="txt">fffff</div>
        </li>
        <li>
          <div class="txt">ggggg</div>
        </li>
        <li>
          <div class="txt">hhhhh</div>
        </li>
      </ul>
    </li>
    <li class="readmore button">
      <a href="#"><span></span></a>
    </li>
  </ul>
</div>

<div class="contents_ttl">
  タイトル
</div>
<div id="sub" class="contents_box">
  <ul>
    <li>
      <div class="txt">aaaaa</div>
    </li>
    <li>
      <div class="txt">bbbbb</div>
    </li>
    <li>
      <div class="txt">ccccc</div>
    </li>
    <li>
      <div class="txt">ddddd</div>
    </li>
    <li class="appear">
      <ul>
        <li>
          <div class="contents_ttl">
            タイトル
          </div>
        </li>
        <li>
          <div class="txt">eeeee</div>
        </li>
        <li>
          <div class="txt">fffff</div>
        </li>
        <li>
          <div class="txt">ggggg</div>
        </li>
        <li>
          <div class="txt">hhhhh</div>
        </li>
      </ul>
    </li>
    <li class="readmore button">
      <a href="#"><span></span></a>
    </li>
  </ul>
</div>

CSS

.contents_box ul li.readmore a span::after {
  content: "続きを読む";
}

.contents_box ul li.open a span::after {
  content: "閉じる";
}

JavaScript

$(function() {
  $('.appear').hide();
  $('.button').click(function() {
    $(this).prev('.appear').slideToggle();
    $(this).toggleClass('open');
    return false;
  });
});