テキストを透明にして読む方法この例のように、

Question

私は隠されたテキストの上でなければなりません続きを読む]ボタンを行うにしようとしています、そして隠されたテキストは、かろうじてそれを見ることができますいくつかの透明性を持っている必要があります。

（ターコイズ色のセルを無視します）

私はSCSSで最初にそれをやっていないし、何がすべてでJS。しかし今、私のクライアントは自分の鉱山を変更し、彼はそれを望んでいます。 https://codepen.io/maketroli/pen/zzNKqR

SCSS：

// READ MORE BASE 
.read-more-wrap { 

    .read-more-state 
    // .read-more-state: This is the input checkbox. We want this to be the first child after the wrap element. 
    // HTML Usage: <input type="checkbox" class="read-more-state" id="_uniqueID_" name="toggle" /> 
    { 
     display: none; //We don't want to show the text boxes 

     // add ellipsis if it's within a paragraph 
     ~ p .read-more-trigger, 
     ~ * p .read-more-trigger { 
     &:before { 
      content: '\2026' ' '; //ellipsis 
      color: #444; 
     } 
     } 

     ~ .read-more-trigger, 
     ~ * .read-more-trigger { 
     // .read-more-trigger: This is used to trigger the action. It's actually the label for the .read-more-state checkbox, which we declare below. 
     // HTML Usage: <label for="_uniqueID_" class="read-more-trigger"></label> 
     // SCSS Sytax: When the trigger is a sibling, or the child of any sibling of .read-more-state within .read-more-wrap 
     cursor: pointer; 
     color: #008dec; 
     max-width: 670px; 
     margin-bottom: .25em; 

     &:hover, &:focus, &:active { 
      color: #ff4500; 
     } 

     &:after { 
      content: 'Show more'; 
      border-bottom: 1px dotted #ccc; 
      white-space: nowrap; 
      font-size: 90%; 
      letter-spacing: -.3px; 
     } 
     } // end .read-more-trigger 

     ~ .read-more-target, 
     ~ * .read-more-target { 
     // .read-more-target: This is what gets shown or hidden when the trigger is pressed. 
     // HTML Usage: <span class="read-more-target">content</span> - Note that this can be a span, a div, a p, or any other element that you want to show or hide, as long as it's a sibling, or the child of a sibling of .read-more-state 
     // SCSS Syntax: When the target is a sibling, or the child of any sibling of read-more-state, then that target's state is: 
     opacity: 0; 
     max-height: 0; 
     font-size: 0; 
     visibility: hidden; 
     transition: .125s linear; 
     } 

     // when .read-more-state is checked: 
     &:checked { 
     ~ * .read-more-target, 
     ~ .read-more-target { 
      opacity: 1; 
      max-height: 999em; 
      font-size: inherit; 
      visibility: visible; 
     } 

     ~ .read-more-trigger:before, 
     ~ * .read-more-trigger:before { 
      content: ''; 
     } 

     ~ .read-more-trigger:after, 
     ~ * .read-more-trigger:after { 
      content: 'Show less'; 
     } 
     } // &:checked 
    } // .read-more-state 
} 
// END READ MORE BASE 

// BEGIN MOBILE ONLY 
.read-more-wrap--mobile { 
    @extend .read-more-wrap; 
    .read-more-state { 
    @media screen and (min-width: 720px) { 
     ~ * .read-more-target, 
     ~ .read-more-target { 
      opacity: 1; 
      max-height: 999em; 
      font-size: inherit; 
      visibility: visible; 
     } 
    } 
    :checked { 
     ~ * .read-more-target, 
     ~ .read-more-target {   
      @media screen and (min-width: 720px) { 
      opacity: 1; 
      max-height: 999em; 
      font-size: inherit; 
      visibility: visible; 
      } 
     } 
    } 

    ~ .read-more-trigger, 
    ~ * .read-more-trigger { 
     @media screen and (min-width: 720px) { 
     display: none; 
     } 
    } 
    } 
} 
// END MOBILE ONLY 

/* Other style */ 
body { 
    padding: 2%; 
} 

HTML：

<div class="read-more-wrap--mobile"> 
    <input type="checkbox" class="read-more-state" id="mobile" name="toggle" /> 
    <h2>Read more wrap</h2> 
    <p>Pinterest taxidermy et heirloom, ennui enim eu bicycle rights fugiat nesciunt commodo. High Life food truck jean shorts in. Blog asymmetrical<span class="read-more-target"> cold-pressed photo booth. Neutra chia in, mustache Etsy nostrud plaid kogi. Magna polaroid stumptown aliqua put a bird on it gentrify, street art craft beer bicycle rights skateboard. DIY plaid gentrify, sustainable sapiente seitan mumblecore viral cardigan. Nisi pariatur laborum cornhole kitsch tempor fingerstache Bushwick. </span><label for="mobile" class="read-more-trigger"></label></p> 
</div> 

を、私はそれで解決策がある場合のJSをタグ付けここ は、私がこれまで行っているものです。 だから、どんな提案？

Answer 1

pにはoverflow: hiddenがあり、次にscrollHeightと一致するように高さを変更してください。あなたはCSSよりも優れているので、私よりも見栄えが良いと思います。

一度に1つ以上を予定していても展開する必要がある場合は、あまりにも多くを変える必要はないはずです。

function expand(target) 
 
{ 
 
    let prev = target.previousElementSibling; 
 
    
 
    prev.style.height = prev.scrollHeight + "px"; 
 
    target.style.display = "none"; 
 
}

#p { 
 
    height: 50px; 
 
    overflow: hidden; 
 
} 
 

 
#read-more { 
 
    background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,255,255,1)); 
 
    color: blue; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    bottom: -20px; 
 
    padding: 15px 0; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 

 
#wrapper { 
 
    position: relative; 
 
    width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='wrapper'> 
 
    <p id='p'>Pinterest taxidermy et heirloom, ennui enim eu bicycle rights fugiat nesciunt commodo. High Life food truck jean shorts in. Blog asymmetrical cold-pressed photo booth. Neutra chia in, mustache Etsy nostrud plaid kogi. Magna polaroid stumptown aliqua put a bird on it gentrify, street art craft beer bicycle rights skateboard. DIY plaid gentrify, sustainable sapiente seitan mumblecore viral cardigan. Nisi pariatur laborum cornhole kitsch tempor fingerstache Bushwick. </p> 
 
    <div id='read-more' onclick="expand(this)"> 
 
    READ MORE 
 
    </div> 
 
</div>