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>

SCSS

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

JavaScript

(function() {
	'use strict';

	var setting = [
    {
      targetClass: ".cutText",
      displayAreaHeight: 100,
      btnClass: "js-toggleBtn"
    }
  ];

  function init() {

    $.each(setting, function() {
      //console.log(this);
      addEventListener(this);
    });

    function addEventListener(obj) {
      console.log(obj.btnClass);
      $(obj.btnClass).on("click", displayText);
    }

    function displayText() {
      alert();
    }

  }

  init();

}());