JSFiddle - React, Tailwind, and code Playground

by yshrkn

HTML

<div class="cutTextWrapper">
  <div class="cutText">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt est voluptatum voluptate rem magni! Pariatur odio, blanditiis, incidunt quo animi, adipisci corporis eveniet voluptatem repellendus beatae quaerat iste at ipsa.</p>
  </div>
  <button class="js-toggleBtn toggleBtn">もっとみる</button>
</div>

<div class="cutTextWrapper">
  <div class="cutText">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt est voluptatum voluptate rem magni! Pariatur odio, blanditiis, incidunt quo animi, adipisci corporis eveniet voluptatem repellendus beatae quaerat iste at ipsa.</p>
  </div>
  <button class="js-toggleBtn toggleBtn">もっとみる</button>
</div>

SCSS

.cutTextWrapper {
  .cutText {
    
  }
  
  .toggleBtn {
    border: 1px solid #777;
    padding: 10px 50px;
    
    &:hover {
      opacity: 0.7;
      cursor: pointer;
    }
  }
}

JavaScript

(function() {
	'use strict';

  //基本設定
	var setMap = [
    {
      targetClass: ".cutText",
      targetClassWrapper: ".cutTextWrapper",
      btnClass: ".js-toggleBtn",
      displayAreaHeight: 100
    },
    {
      targetClass: ".cutText",
      targetClassWrapper: ".cutTextWrapper",
      btnClass: ".js-toggleBtn",
      displayAreaHeight: 100
    }
  ];

  //状態管理
  var stateMap = [];

  function updateStateMap(index) {

  }

  function toggleDisplayText(toggleBtnObj, index) {
    console.log();
  }

  function addEventListener(obj) {
    $(obj.btnClass).on("click", function(e) {
      var index  = $(e.currentTarget).index();

      //stateMap更新
      if (stateMap[index] === "display") {
        stateMap[index] = "non-display";
      } else {
        stateMap[index] = "display";
      }

      console.log("stateMap:", stateMap);

      //表示切り替え
      toggleDisplayText(e, index);
    });
  }

  function init() {
    //イベント付与
    $.each(setMap, function() {
      addEventListener(this);
    });
  }

  init();

}());