2020年5月21日 / 最終更新日 : 2021年10月12日 nasubi ブログ

GAで押下計測しつつ長文をスムーズに開閉するボタンの作成方法/jQuery使用

長文を途中からボヤかして、「続きを読む」ボタンを表示。クリックすると、ニュルッと開いて「閉じる」ボタンに変化。その「閉じる」ボタンを押すニュルッと閉じる仕様のボタン。
まあ、よく見ますよね？
今回は、このボタンにGoogleアナリティクスのイベントトラッキング機能を組み込んで、ボタンのクリック（タップ）状況を計測する為のHTML、CSS、jQueryを以下にシェアしようと思います。

今回は、下記の2点を目標に作成してます。

最新のGAイベントトラッキングに対応（gtag）
ウィンドウサイズ変更時に文章が見切れないようにする

デモ

まずは完成品としてのデモをご覧ください。

デモを開く
※新しいタブが開きます

HTML

次にHTMLです。
.more-btn内に「続きを読む」ボタンと「閉じる」ボタンを別々に作成し、GAイベントトラッキングを設定します。
.more-item内は.more-item-innerで中身の要素をまとめておきます。

<div class="more-wrap">
    <span class="more-btn">
        <span class="open" onclick="gtag('event','open',{'event_label':'neko'});">続きを読む</span>
        <span class="close" onclick="gtag('event','close',{'event_label':'neko'});">閉じる</span>
    </span>
    <div class="more-item">
        <div class="more-item-inner">
            <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
            <p>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。</p>
            <p>ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>
            <p>掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。</p>
        </div>
    </div>
</div>

<span class="open" onclick="gtag('event','open',{'event_label':'neko'});">続きを読む</span>

</span>

<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>

<p>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。</p>

<p>ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>

<p>掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。</p>

</div>

CSS

CSSは、まあ、お好きなデザインでカスタマイズください。

p {
    margin: 0;
    font-size: 16px;
}

.more-wrap {
    position: relative;
    margin-bottom: 70px;
}

.more-btn {
    position: absolute;
    bottom: -70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.more-btn>.open,
.more-btn>.close {
    /* ボタンのスタイル（共通） */
    display: block;
    width: 210px;
    margin: 0 auto;
    padding: 1em 0;
    font-size: 0.9em;
    cursor: pointer;
    text-align: center;
}

.more-btn>.open {
    /* 「続きを読む」ボタンのスタイル */
    background-color: #ffb6c1;
    color: #dc143c;
}

.more-btn>.close {
    /* 「閉じる」ボタンのスタイル */
    background-color: #87cefa;
    color: #191970;
    /* 最初は非表示にする */
    display: none;
}

.more-item {
    position: relative;
    overflow: hidden;
}

.more-item.is-hide {
    /* 閉じているときに見える高さ */
    height: 70px;
}

.more-item::before {
    /* グラデーションで下方を隠す */
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 20px;
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.9) 50%,
            rgba(255, 255, 255, 0.9) 50%,
            #fff 100%);
    background: linear-gradient(top, rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.9) 50%,
            rgba(255, 255, 255, 0.9) 50%,
            #fff 100%);
}

.more-btn.is-show+.more-item::before {
    display: none;
}

.more-item-inner {
    padding: 0 1em;
}

p {

margin: 0;

font-size: 16px;

}

.more-wrap {

position: relative;

margin-bottom: 70px;

}

.more-btn {

position: absolute;

bottom: -70px;

left: 50%;

transform: translateX(-50%);

z-index: 2;

}

.more-btn>.open,

.more-btn>.close {

/* ボタンのスタイル（共通） */

display: block;

width: 210px;

margin: 0 auto;

padding: 1em 0;

font-size: 0.9em;

cursor: pointer;

text-align: center;

}

.more-btn>.open {

/* 「続きを読む」ボタンのスタイル */

background-color: #ffb6c1;

color: #dc143c;

}

.more-btn>.close {

/* 「閉じる」ボタンのスタイル */

background-color: #87cefa;

color: #191970;

/* 最初は非表示にする */

display: none;

}

.more-item {

position: relative;

overflow: hidden;

}

.more-item.is-hide {

/* 閉じているときに見える高さ */

height: 70px;

}

.more-item::before {

/* グラデーションで下方を隠す */

display: block;

position: absolute;

bottom: 0;

left: 0;

content: "";

width: 100%;

height: 20px;

background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%,

rgba(255, 255, 255, 0.9) 50%,

#fff 100%);

background: linear-gradient(top, rgba(255, 255, 255, 0) 0%,

rgba(255, 255, 255, 0.9) 50%,

#fff 100%);

}

.more-btn.is-show+.more-item::before {

display: none;

}

.more-item-inner {

padding: 0 1em;

}

jQuery

jQueryは、「ウィンドウサイズ変更時の処理」により、リアルタイムで要素の高さを取得・反映しています。
これで文章が見切れることがなくなりました。

// *************************
//   ターゲットの高さを保存
// *************************
var itemHeights = []; //実際の要素の高さ（配列）
var returnHeight; //縮めているときに見える高さ

$(function () {
    $(".more-item").each(function () {
        var thisHeight = $(this).height(); //実際の.more-itemの高さを取得
        itemHeights.push(thisHeight); //配列に入れる
        $(this).addClass("is-hide"); //.is-hideの高さ(CSSで指定)に縮める
        returnHeight = $(this).height(); //.is-hideの高さを取得
    });
});

// *************************
//   .openクリック時の処理
// *************************
$(".more-btn > .open").click(function () {
    var index = $(this).parent(".more-btn").index(".more-btn"); //何番目の.more-btnか確認
    var addHeight = itemHeights[index]; //配列から高さを取得

    $(this).parent(".more-btn").addClass("is-show").next(".more-item").animate({
        height: addHeight
    }, 200).removeClass("is-hide"); //実際の.more-itemの高さに戻す
    $(this).css("display", "none"); //開くボタンを消す
    $(this).next(".close").css("display", "block"); //閉じるボタンを出す
});

// *************************
//   .closeクリック時の処理
// *************************
$(".more-btn > .close").click(function () {
    $(this).parent(".more-btn").removeClass("is-show").next(".more-item").animate({
        height: returnHeight
    }, 200).addClass("is-hide"); //.is-hideの高さ(CSSで指定)に縮める
    $(this).css("display", "none"); //閉じるボタンを消す
    $(this).prev(".open").css("display", "block"); //開くボタンを出す
});

// ******************************
//   ウィンドウサイズ変更時の処理
// ******************************
$(window).resize(function () {
    $(".more-btn").each(function () {
        var index = $(this).index(".more-btn");
        var thisHeight = $(this).next(".more-item").children().height(); //ターゲットの子要素の高さを取得
        itemHeights[index] = thisHeight; //高さを更新
        var addHeight = itemHeights[index];
        if ($(this).hasClass("is-show")) {
            $(this).next(".more-item").css("height", addHeight); //開いている.more-itemの高さを変更する
        }
    });
});

// *************************

// ターゲットの高さを保存

// *************************

var itemHeights = []; //実際の要素の高さ（配列）

var returnHeight; //縮めているときに見える高さ

$(function () {

$(".more-item").each(function () {

var thisHeight = $(this).height(); //実際の.more-itemの高さを取得

itemHeights.push(thisHeight); //配列に入れる

$(this).addClass("is-hide"); //.is-hideの高さ(CSSで指定)に縮める

returnHeight = $(this).height(); //.is-hideの高さを取得

});

// *************************

// .openクリック時の処理

// *************************

$(".more-btn > .open").click(function () {

var index = $(this).parent(".more-btn").index(".more-btn"); //何番目の.more-btnか確認

var addHeight = itemHeights[index]; //配列から高さを取得

$(this).parent(".more-btn").addClass("is-show").next(".more-item").animate({

height: addHeight

}, 200).removeClass("is-hide"); //実際の.more-itemの高さに戻す

$(this).css("display", "none"); //開くボタンを消す

$(this).next(".close").css("display", "block"); //閉じるボタンを出す

});

// *************************

// .closeクリック時の処理

// *************************

$(".more-btn > .close").click(function () {

$(this).parent(".more-btn").removeClass("is-show").next(".more-item").animate({

height: returnHeight

}, 200).addClass("is-hide"); //.is-hideの高さ(CSSで指定)に縮める

$(this).css("display", "none"); //閉じるボタンを消す

$(this).prev(".open").css("display", "block"); //開くボタンを出す

});

// ******************************

// ウィンドウサイズ変更時の処理

// ******************************

$(window).resize(function () {

$(".more-btn").each(function () {

var index = $(this).index(".more-btn");

var thisHeight = $(this).next(".more-item").children().height(); //ターゲットの子要素の高さを取得

itemHeights[index] = thisHeight; //高さを更新

var addHeight = itemHeights[index];

if ($(this).hasClass("is-show")) {

$(this).next(".more-item").css("height", addHeight); //開いている.more-itemの高さを変更する

}

});

以上、これらをコピペして調整すれば、いい感じで長文の開閉ボタンができると思います。
こちらからは以上です！∠( ˙-˙ )／

▼参考
[jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装する | metrograph.jp

カテゴリー: ブログ