Cara Menambahkan Fitur Accordion di ToC RankMath Jadi Bisa Show/Hide Seperti Plugin Premium

Kita tahu kalau sekarang RankMath SEO sudah membuat fitur tambahan pada plugin -nya yaitu Table of Contents by RankMath, namun fitur yang diberikan merupakan fitur standar dan biasa saja menurut saya. Apalagi kalau artikel kita panjang lebih dari 1000 kata, tentu ToC RankMath akan terlihat jelek dan tidak rapi karena tidak bisa disembunyikan dan tidak memiliki fitur show/hide atau biasa kita kenal dengan fitur Accordion aka Collapsibles.

Cara Menambahkan fitur Accordion di ToC RankMath

Seperti yang sedang ingin saya bahas di sini, jika kamu pengguna Table of Contents by RankMath, seperti saya. Maka kamu akan membutuhkan fitur ini. Kamu bisa lihat sendiri contoh dari accordion yang saya gunakan di ToC RankMath. Jika kamu menginginkannya, saya akan bagikan caranya secara cuma-cuma. Kamu tinggal ikuti saja langkah-langkah yang akan saya bagikan di dalam artikel ini, pastikan kamu sudah mengerti secara basic bagaimana cara menyimpan CSS dan functions.php. Jika kamu belum paham, silakan baca-baca terlebih dahulu di lewat Google Search.

1. Tambahkan CSS Accordion ToC RankMath ke Website

.wp-block-rank-math-toc-block {
	position:relative;
}

.wp-block-rank-math-toc-block h2 {
    background: #f1f2f6;
    padding: 10px 12px 10px 18px;
    cursor: pointer;
    font-size: 18px !important;
    font-weight: normal !important;
    position:relative;
    margin-bottom: 0;
}
.wp-block-rank-math-toc-block h2:before {
	display:inline-block;
	content: "";
        width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 12px;
	border-color: transparent transparent transparent #000000;
	margin-right: 8px;
}

.wp-block-rank-math-toc-block nav{
	padding: 10px 10px 0px 10px;
	max-height: 0;
	overflow:hidden;
}
.wp-block-rank-math-toc-block input:checked+h2~nav {
	max-height: 200vh;
	overflow:visible;
}

TIPS
CSS ToC Accordion untuk RankMath di atas adalah CSS standar, kamu bisa modifikasi seperti yang saya lakukan. Sesuaikan dengan kebutuhan kamu, untuk tampilan dan warnanya.

2. Tambahkan Filter pemanggil ToC Collapse/Toggle RankMath ke file Functions.php

/**
 * Convert Rank Math FAQ Block Into Accordion
 */
function turn_rm_toc_collapsable() {
    ?>
    <script>
        jQuery(document).ready(function() {
            var tocItems = jQuery("div.wp-block-rank-math-toc-block");
            tocItems.bind("click", function(event) {
                var nav = jQuery(this).find("nav");
                if (nav.css("overflow") == "hidden") {
                    nav.css("overflow", "visible");
                    nav.css("max-height", "200vh");
                } else {
                    nav.css("overflow", "hidden");
                    nav.css("max-height", "0");
                }
            });
        });
 
    </script>
    <?php
}
add_action( 'wp_footer', 'turn_rm_toc_collapsable' );

3. Simpan dan coba jalankan ToC RankMath di Website kamu

Selesai, setelah kamu menyimpan CSS ToC RankMath dan filter pemanggil ToC collapse/toggle untuk ToC RankMath. Maka nantinya secara otomatis semua Table of Contents RankMath kamu akan memiliki fitur show/hide seperti yang saya gunakan di website https://xkomo.com.

Ingin Mempercantik Tampilan ToC RankMath?

Mungkin di artikel berikutnya saya akan bagikan beberapa CSS modifikasi ToC RankMath yang saya punya, siapa tahu kamu membutuhkannya. Tetapi tentu ada syaratnya. Jika artikel ini ramai hingga 1000 views lebih dan 100 komentar lebih, maka akan segera saya proses kumpulan ide dan CSS untuk ToC RankMath.

Jadi, ayo ramaikan artikel ini ya …