こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回は皆さんがおそらく一度は見たことがあるであろう、ニュースサイトでよく使われているギミックの実装方法についてご紹介します！

実装例

これが実装例です。
見たことありますよね？
「もっと見る」みたいな感じで、ボタンを押して続きを見るギミックです。
これはなぜしてるのかというと、サイトに訪問した人がしっかりとコンテンツを見ているのかを判断しています。
moreボタンにアナリティクスを仕込んだりとかしてるんだと思います。
もしくは、「ここから先は会員登録してください」というのも多いですよね。

HTML例

<div class="box">
    <div class="text">
        <p>全文読みたいですよね〜</p>
        <p>
            ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー<br>
            ダミーダミーダミーダミーダミーダミー<br>
            ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー<br><br>
            ダミーダミー<br>
            ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー<br>
            ダミーダミーダミーダミーダミーダミー<br>
            ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー<br>
            ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー<br>
            ダミーダミーダミーダミーダミーダミーダミー<br>
            ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー<br>
        </p>
        <p class="see">
            見えました！
        </p>
        <div class="hide">
            <button id="js-more">more</button>
        </div>
    </div>
</div>

CSS例

.box{
    padding: 10px;
    width: 100%;
    margin: auto;
    border: 1px solid #000;
}
.text{
    height: 300px;
    overflow: hidden;
    position: relative;
}
.hide{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 190px;
    background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
}
#js-more{
    background: #fff;
    width: 100px;
    margin: 120px auto 0;
    display: block;
    padding: 10px 20px;
    border: 1px solid #000;
    transition: .4s ease;
}
#js-more:hover{
    background: #555;
    color: #fff;
}
.is-show{
    height: auto;
    background: none;
}
.see{
    font-weight: bold;
    text-align: center;
    font-size: 30px;
}

JavaScript例

let moreBtn =  document.getElementById('js-more');
let text = document.getElementsByClassName('text');
let hide = document.getElementsByClassName('hide');
moreBtn.addEventListener('click',function(){
    text[0].classList.add('is-show');
    hide[0].classList.add('is-show');
    this.style.display = 'none';
},false);

今回はVanilla.jsで記述してみました。
なので、jQueryの読み込みは必要ないです。

Vanilla.jsとは

Vanilla.jsは、端的に言うとそのまま、素のJavaScriptです。
これまでjQueryがWEB業界では主流だったのですが、
昨今、JavaScriptの発達により、「もうjQuery必要ないよね」という流れが起こっています。

個人的にjQueryは、やはりとっつきやすいのと直感的に記述しやすいので、
まだまだバリバリに使っていますが、
今後Vanilla.jsを主軸にしていこうかなと考えています。
メリットとしては、実行速度がVanilla.jsの方が速いんですよね。
サイトパフォーマンスを重視するなら断然Vanilla.jsです！

昔エンジニアの間で話題になったVanilla.jsのジョークサイトを紹介します。
コチラ（外部リンク）です。
コーディング初心者は騙されてしまうんじゃないでしょうかw

まとめ

コピペしてガンガン使ってください！