jQuery

【jQuery】リンクをクリックすると開く/閉じるのアニメーションを追加TEXT-OVERFLOW-ELLIPSIS

January 20, 2017
TEXT-OVERFLOW-ELLIPSIS.JS

TEXT-OVERFLOW-ELLIPSISは複数行のテキスト文字列の最後に省略記号を追加し、さらにVIEW MOREリンクをクリックすると開く/閉じるのアニメーションを追加します。

HTML

      <div class="short-description js-ellipsis" data-lines="2">
        <div class="full">Has attribute data-lines="2". We have a lot of text here, but we want it to overflow correctly. We want to cut off the text at a specific line using the "data-lines='xx'" attribute, so we have the option of 1 to however many lines of text desired. Also added in a specific "view more" link that animates the full text in on click, sliding down or back up depending on if it is open or not already. Now I'm just adding in more text, la di dadi.</div>
        <div class="short"></div>
        
      </div>