Chia sẻ code tabe of content chuẩn nhất

Phiên bản đầu tiên là chưa có hộp số mục lục chỉ là đánh số, ưu điểm bản code này chỉ dùng áp dụng cho tiêu đề nội dung thuộc h2 và h3. Không áp dụng cho các thẻ H còn lại

function custom_table_of_contents($content) {
    // Initialize counters for Roman numerals and nested numbers
    $roman_numerals = range(1, 20);
    $nested_numbers = range(1, 20);

    // Initialize counters
    $current_roman = 1;
    $current_nested = 1;

    // Callback function for preg_replace_callback
    $replace_callback = function($matches) use (&$current_roman, &$current_nested) {
        $tag = $matches[1];
        $content = $matches[2];
        
        // If the tag is h2, use Roman numerals and reset nested counter
        if ($tag == 'h2') {
            $number = $current_roman;
            $current_roman++;
            $current_nested = 1; // Reset nested counter for h3
        } 
        // If the tag is h3, use nested numbers
        else if ($tag == 'h3') {
            $number = $current_nested;
            $current_nested++;
        } else {
            return $matches[0]; // Return unchanged if not h2 or h3
        }
        
        // Format the number according to the tag
        if ($tag == 'h2') {
            $formatted_number = toRoman($number);
        } else {
            $formatted_number = $number;
        }
        
        // Return the modified tag with the formatted number
        return "<$tag>{$formatted_number}. $content</$tag>";
    };

    // Replace occurrences of h2 and h3 with formatted versions
    $content = preg_replace_callback('/<(h2|h3)>(.*?)<\/\1>/', $replace_callback, $content);

    return $content;
}

// Function to convert Arabic numbers to Roman numerals
function toRoman($number) {
    $map = array('M' => 1000, 'CM' => 900, 'D' => 500, 'CD' => 400, 'C' => 100, 'XC' => 90, 'L' => 50, 'XL' => 40, 'X' => 10, 'IX' => 9, 'V' => 5, 'IV' => 4, 'I' => 1);
    $returnValue = '';
    while ($number > 0) {
        foreach ($map as $roman => $int) {
            if($number >= $int) {
                $number -= $int;
                $returnValue .= $roman;
                break;
            }
        }
    }
    return $returnValue;
}

// Add filter to apply custom_table_of_contents function to the_content
add_filter('the_content', 'custom_table_of_contents');

function custom_table_of_contents($content) {

// Initialize counters for Roman numerals and nested numbers

$roman_numerals = range(1, 20);

$nested_numbers = range(1, 20);

// Initialize counters

$current_roman = 1;

$current_nested = 1;

// Callback function for preg_replace_callback

$replace_callback = function($matches) use (&$current_roman, &$current_nested) {

$tag = $matches[1];

$content = $matches[2];

// If the tag is h2, use Roman numerals and reset nested counter

if ($tag == 'h2') {

$number = $current_roman;

$current_roman++;

$current_nested = 1; // Reset nested counter for h3

}

// If the tag is h3, use nested numbers

else if ($tag == 'h3') {

$number = $current_nested;

$current_nested++;

} else {

return $matches[0]; // Return unchanged if not h2 or h3

}

// Format the number according to the tag

if ($tag == 'h2') {

$formatted_number = toRoman($number);

} else {

$formatted_number = $number;

}

// Return the modified tag with the formatted number

return "<$tag>{$formatted_number}. $content</$tag>";

};

// Replace occurrences of h2 and h3 with formatted versions

$content = preg_replace_callback('/<(h2|h3)>(.*?)<\/\1>/', $replace_callback, $content);

return $content;

}

// Function to convert Arabic numbers to Roman numerals

function toRoman($number) {

$map = array('M' => 1000, 'CM' => 900, 'D' => 500, 'CD' => 400, 'C' => 100, 'XC' => 90, 'L' => 50, 'XL' => 40, 'X' => 10, 'IX' => 9, 'V' => 5, 'IV' => 4, 'I' => 1);

$returnValue = '';

while ($number > 0) {

foreach ($map as $roman => $int) {

if($number >= $int) {

$number -= $int;

$returnValue .= $roman;

break;

}

return $returnValue;

}

// Add filter to apply custom_table_of_contents function to the_content

add_filter('the_content', 'custom_table_of_contents');

bản function gốc đánh số la mã cho h2 và đánh số tự nhiên cho h3

function custom_table_of_contents($content) {
    // Initialize counters for Roman numerals and nested numbers
    $roman_numerals = range(1, 20);
    $nested_numbers = range(1, 20);

    // Initialize counters
    $current_roman = 1;
    $current_nested = 1;

    // Callback function for preg_replace_callback
    $replace_callback = function($matches) use (&$current_roman, &$current_nested) {
        $tag = $matches[1];
        $content = $matches[2];
        
        // If the tag is h2, use Roman numerals and reset nested counter
        if ($tag == 'h2') {
            $number = $current_roman;
            $current_roman++;
            $current_nested = 1; // Reset nested counter for h3
        } 
        // If the tag is h3, use nested numbers
        else if ($tag == 'h3') {
            $number = $current_nested;
            $current_nested++;
        } else {
            return $matches[0]; // Return unchanged if not h2 or h3
        }
        
        // Format the number according to the tag
        if ($tag == 'h2') {
            $formatted_number = toRoman($number);
        } else {
            $formatted_number = $number;
        }
        
        // Return the modified tag with the formatted number
        return "<$tag>{$formatted_number}. $content</$tag>";
    };

    // Replace occurrences of h2 and h3 with formatted versions
    $content = preg_replace_callback('/<(h2|h3)>(.*?)<\/\1>/', $replace_callback, $content);

    return $content;
}

function custom_table_of_contents($content) {

// Initialize counters for Roman numerals and nested numbers

$roman_numerals = range(1, 20);

$nested_numbers = range(1, 20);

// Initialize counters

$current_roman = 1;

$current_nested = 1;

// Callback function for preg_replace_callback

$replace_callback = function($matches) use (&$current_roman, &$current_nested) {

$tag = $matches[1];

$content = $matches[2];

// If the tag is h2, use Roman numerals and reset nested counter

if ($tag == 'h2') {

$number = $current_roman;

$current_roman++;

$current_nested = 1; // Reset nested counter for h3

}

// If the tag is h3, use nested numbers

else if ($tag == 'h3') {

$number = $current_nested;

$current_nested++;

} else {

return $matches[0]; // Return unchanged if not h2 or h3

}

// Format the number according to the tag

if ($tag == 'h2') {

$formatted_number = toRoman($number);

} else {

$formatted_number = $number;

}

// Return the modified tag with the formatted number

return "<$tag>{$formatted_number}. $content</$tag>";

};

// Replace occurrences of h2 and h3 with formatted versions

$content = preg_replace_callback('/<(h2|h3)>(.*?)<\/\1>/', $replace_callback, $content);

return $content;

}

code 1 sẽ hiển thị lại cả tiêu đề và P nội dung bên trong bài

function ngoinhaweb_list_shortcode() {
    ob_start(); ?>
    <div class="ngoinhaweb-list-container">
        <div class="ngoinhaweb-list-header">
            <span class="ngoinhaweb-list-title">Mục lục nội dung</span>
            <span class="ngoinhaweb-list-toggle dashicons dashicons-arrow-down-alt2"></span>
        </div>
        <div class="ngoinhaweb-list-content" style="display: none;">
            <?php
            // Retrieve the current post content
            global $post;
            $content = $post->post_content;

            // Apply custom table of contents function
            $content_with_toc = custom_table_of_contents($content);

            // Output the modified content
            echo $content_with_toc;
            ?>
        </div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('ngoinhaweb-list', 'ngoinhaweb_list_shortcode');

function ngoinhaweb_list_shortcode() {

ob_start(); ?>

</div>

<?php

// Retrieve the current post content

global $post;

$content = $post->post_content;

// Apply custom table of contents function

$content_with_toc = custom_table_of_contents($content);

// Output the modified content

echo $content_with_toc;

</div>

<?php

return ob_get_clean();

}

add_shortcode('ngoinhaweb-list', 'ngoinhaweb_list_shortcode');

Bản lỗi code. Vấn đề là chỉ box mục lục nội dung ok. còn nội dung bài viết thì biến mất ẩn đi

function custom_table_of_contents($content) {
    // Initialize counters for nested numbers
    $nested_numbers = range(1, 20);

    // Initialize counters
    $current_nested = 1;

    // List of allowed tags
    $allowed_tags = array('h2', 'h3');

    // Callback function for preg_replace_callback
    $replace_callback = function($matches) use (&$current_nested, $allowed_tags) {
        $tag = $matches[1];
        $content = $matches[2];
        
        // Check if the tag is allowed
        if (!in_array($tag, $allowed_tags)) {
            return $matches[0]; // Return unchanged if not allowed
        }
        
        // If the tag is h2, reset nested counter
        if ($tag == 'h2') {
            $current_nested = 1; // Reset nested counter for h3
        } 
        
        // Use nested numbers
        $number = $current_nested;
        $current_nested++;
        
        // Return the modified tag with the formatted number
        return "<$tag>{$number}. $content</$tag>";
    };

    // Replace occurrences of h2 and h3 with formatted versions
    $content = preg_replace_callback('/<(h2|h3)>(.*?)<\/\1>/', $replace_callback, $content);

    return $content;
}

// Function to convert Arabic numbers to Roman numerals


// Add filter to apply custom_table_of_contents function to the_content
add_filter('the_content', 'custom_table_of_contents');
//
// hiển thị frontend list table content
// Add shortcode to display custom table of contents
function ngoinhaweb_list_shortcode() {
    ob_start(); ?>
    <div class="ngoinhaweb-list-container">
        <div class="ngoinhaweb-list-header">
            <span class="ngoinhaweb-list-title">Mục lục nội dung</span>
            <span class="ngoinhaweb-list-toggle dashicons dashicons-arrow-down-alt2"></span>
        </div>
        <div class="ngoinhaweb-list-content" style="display: none;">
            <?php
            // Retrieve the current post content
            global $post;
            $content = $post->post_content;

            // Initialize counters for h2 and h3 tags
            $h2_count = 0;
            $h3_count = 0;

            // Find all h2 and h3 tags in the content
            preg_match_all('/<(h2|h3)>(.*?)<\/\1>/', $content, $matches, PREG_SET_ORDER);

            // Output h2 and h3 tags with appropriate numbering
            foreach ($matches as $match) {
                $tag = $match[1];
                $content = $match[2];
                if ($tag === 'h2') {
                    $h2_count++;
                    echo "<$tag>" . toRoman($h2_count) . ". $content</$tag>";
                    // Reset h3 counter when encountering h2
                    $h3_count = 0;
                } elseif ($tag === 'h3') {
                    $h3_count++;
                    echo "<$tag>$h3_count. $content</$tag>";
                }
            }
            ?>
        </div>
    </div>
    <?php
    return ob_get_clean();
}

// Function to convert Arabic numbers to Roman numerals
function toRoman($number) {
    $map = array('M' => 1000, 'CM' => 900, 'D' => 500, 'CD' => 400, 'C' => 100, 'XC' => 90, 'L' => 50, 'XL' => 40, 'X' => 10, 'IX' => 9, 'V' => 5, 'IV' => 4, 'I' => 1);
    $returnValue = '';
    while ($number > 0) {
        foreach ($map as $roman => $int) {
            if($number >= $int) {
                $number -= $int;
                $returnValue .= $roman;
                break;
            }
        }
    }
    return $returnValue;
}

// Add filter to apply ngoinhaweb_list_shortcode function to the_content
add_filter('the_content', 'ngoinhaweb_list_shortcode');

100

101

102

103

104

105

106

function custom_table_of_contents($content) {

// Initialize counters for nested numbers

$nested_numbers = range(1, 20);

// Initialize counters

$current_nested = 1;

// List of allowed tags

$allowed_tags = array('h2', 'h3');

// Callback function for preg_replace_callback

$replace_callback = function($matches) use (&$current_nested, $allowed_tags) {

$tag = $matches[1];

$content = $matches[2];

// Check if the tag is allowed

if (!in_array($tag, $allowed_tags)) {

return $matches[0]; // Return unchanged if not allowed

}

// If the tag is h2, reset nested counter

if ($tag == 'h2') {

$current_nested = 1; // Reset nested counter for h3

}

// Use nested numbers

$number = $current_nested;

$current_nested++;

// Return the modified tag with the formatted number

return "<$tag>{$number}. $content</$tag>";

};

// Replace occurrences of h2 and h3 with formatted versions

$content = preg_replace_callback('/<(h2|h3)>(.*?)<\/\1>/', $replace_callback, $content);

return $content;

}

// Function to convert Arabic numbers to Roman numerals

// Add filter to apply custom_table_of_contents function to the_content

add_filter('the_content', 'custom_table_of_contents');

// hiển thị frontend list table content

// Add shortcode to display custom table of contents

function ngoinhaweb_list_shortcode() {

ob_start(); ?>

</div>

<?php

// Retrieve the current post content

global $post;

$content = $post->post_content;

// Initialize counters for h2 and h3 tags

$h2_count = 0;

$h3_count = 0;

// Find all h2 and h3 tags in the content

preg_match_all('/<(h2|h3)>(.*?)<\/\1>/', $content, $matches, PREG_SET_ORDER);

// Output h2 and h3 tags with appropriate numbering

foreach ($matches as $match) {

$tag = $match[1];

$content = $match[2];

if ($tag === 'h2') {

$h2_count++;

echo "<$tag>" . toRoman($h2_count) . ". $content</$tag>";

// Reset h3 counter when encountering h2

$h3_count = 0;

} elseif ($tag === 'h3') {

$h3_count++;

echo "<$tag>$h3_count. $content</$tag>";

}

</div>

<?php

return ob_get_clean();

}

// Function to convert Arabic numbers to Roman numerals

function toRoman($number) {

$map = array('M' => 1000, 'CM' => 900, 'D' => 500, 'CD' => 400, 'C' => 100, 'XC' => 90, 'L' => 50, 'XL' => 40, 'X' => 10, 'IX' => 9, 'V' => 5, 'IV' => 4, 'I' => 1);

$returnValue = '';

while ($number > 0) {

foreach ($map as $roman => $int) {

if($number >= $int) {

$number -= $int;

$returnValue .= $roman;

break;

}

return $returnValue;

}

// Add filter to apply ngoinhaweb_list_shortcode function to the_content

add_filter('the_content', 'ngoinhaweb_list_shortcode');

Js cũ cho hiển thị full nội dung bên trong box mục lục

// Function sổ ra và thu gọn
function ngoinhaweb_toggle_list() {
    jQuery('.ngoinhaweb-list-toggle').on('click', function() {
        var $container = jQuery(this).closest('.ngoinhaweb-list-container');
        var $content = $container.find('.ngoinhaweb-list-content');

        if ($content.is(':visible')) {
            // If content is visible, hide it and change icon
            $content.hide();
            jQuery(this).removeClass('dashicons-arrow-up-alt2').addClass('dashicons-arrow-down-alt2');
        } else {
            // If content is hidden, show it and change icon
            $content.show();
            jQuery(this).removeClass('dashicons-arrow-down-alt2').addClass('dashicons-arrow-up-alt2');
        }
    });
}

jQuery(document).ready(function($) {
    ngoinhaweb_toggle_list();
});

// Function sổ ra và thu gọn

function ngoinhaweb_toggle_list() {

jQuery('.ngoinhaweb-list-toggle').on('click', function() {

var $container = jQuery(this).closest('.ngoinhaweb-list-container');

var $content = $container.find('.ngoinhaweb-list-content');

if ($content.is(':visible')) {

// If content is visible, hide it and change icon

$content.hide();

jQuery(this).removeClass('dashicons-arrow-up-alt2').addClass('dashicons-arrow-down-alt2');

} else {

// If content is hidden, show it and change icon

$content.show();

jQuery(this).removeClass('dashicons-arrow-down-alt2').addClass('dashicons-arrow-up-alt2');

}

});

}

jQuery(document).ready(function($) {

ngoinhaweb_toggle_list();

});

============== kết quả bản dưới đây là còn show hết kể cả box mục lục lẫn ngoài box mục lục function

function custom_table_of_contents($content) {
    // Initialize counters for Roman numerals and nested numbers
    $roman_numerals = range(1, 20);
    $nested_numbers = range(1, 20);

    // Initialize counters
    $current_roman = 1;
    $current_nested = 1;

    // Callback function for preg_replace_callback
    $replace_callback = function($matches) use (&$current_roman, &$current_nested) {
        $tag = $matches[1];
        $content = $matches[2];
        
        // If the tag is h2, use Roman numerals and reset nested counter
        if ($tag == 'h2') {
            $number = $current_roman;
            $current_roman++;
            $current_nested = 1; // Reset nested counter for h3
        } 
        // If the tag is h3, use nested numbers
        else if ($tag == 'h3') {
            $number = $current_nested;
            $current_nested++;
        } else {
            return $matches[0]; // Return unchanged if not h2 or h3
        }
        
        // Format the number according to the tag
        if ($tag == 'h2') {
            $formatted_number = toRoman($number);
        } else {
            $formatted_number = $number;
        }
        
        // Return the modified tag with the formatted number
        return "<$tag>{$formatted_number}. $content</$tag>";
    };

    // Replace occurrences of h2 and h3 with formatted versions
    $content = preg_replace_callback('/<(h2|h3)>(.*?)<\/\1>/', $replace_callback, $content);

    return $content;
}

// Function to convert Arabic numbers to Roman numerals
function toRoman($number) {
    $map = array('M' => 1000, 'CM' => 900, 'D' => 500, 'CD' => 400, 'C' => 100, 'XC' => 90, 'L' => 50, 'XL' => 40, 'X' => 10, 'IX' => 9, 'V' => 5, 'IV' => 4, 'I' => 1);
    $returnValue = '';
    while ($number > 0) {
        foreach ($map as $roman => $int) {
            if($number >= $int) {
                $number -= $int;
                $returnValue .= $roman;
                break;
            }
        }
    }
    return $returnValue;
}

// Add filter to apply custom_table_of_contents function to the_content
add_filter('the_content', 'custom_table_of_contents');
//
// hiển thị frontend list table content
// Add shortcode to display custom table of contents
function ngoinhaweb_list_shortcode() {
    ob_start(); ?>
    <div class="ngoinhaweb-list-container">
        <div class="ngoinhaweb-list-header">
            <span class="ngoinhaweb-list-title">Mục lục nội dung</span>
            <span class="ngoinhaweb-list-toggle dashicons dashicons-arrow-down-alt2"></span>
        </div>
        <div class="ngoinhaweb-list-content" style="display: none;">
            <?php
            // Retrieve the current post content
            global $post;
            $content = $post->post_content;

            // Apply custom table of contents function
            $content_with_toc = custom_table_of_contents($content);

            // Output the modified content
            echo $content_with_toc;
            ?>
        </div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('ngoinhaweb-list', 'ngoinhaweb_list_shortcode');
//

function custom_table_of_contents($content) {

// Initialize counters for Roman numerals and nested numbers

$roman_numerals = range(1, 20);

$nested_numbers = range(1, 20);

// Initialize counters

$current_roman = 1;

$current_nested = 1;

// Callback function for preg_replace_callback

$replace_callback = function($matches) use (&$current_roman, &$current_nested) {

$tag = $matches[1];

$content = $matches[2];

// If the tag is h2, use Roman numerals and reset nested counter

if ($tag == 'h2') {

$number = $current_roman;

$current_roman++;

$current_nested = 1; // Reset nested counter for h3

}

// If the tag is h3, use nested numbers

else if ($tag == 'h3') {

$number = $current_nested;

$current_nested++;

} else {

return $matches[0]; // Return unchanged if not h2 or h3

}

// Format the number according to the tag

if ($tag == 'h2') {

$formatted_number = toRoman($number);

} else {

$formatted_number = $number;

}

// Return the modified tag with the formatted number

return "<$tag>{$formatted_number}. $content</$tag>";

};

// Replace occurrences of h2 and h3 with formatted versions

$content = preg_replace_callback('/<(h2|h3)>(.*?)<\/\1>/', $replace_callback, $content);

return $content;

}

// Function to convert Arabic numbers to Roman numerals

function toRoman($number) {

$map = array('M' => 1000, 'CM' => 900, 'D' => 500, 'CD' => 400, 'C' => 100, 'XC' => 90, 'L' => 50, 'XL' => 40, 'X' => 10, 'IX' => 9, 'V' => 5, 'IV' => 4, 'I' => 1);

$returnValue = '';

while ($number > 0) {

foreach ($map as $roman => $int) {

if($number >= $int) {

$number -= $int;

$returnValue .= $roman;

break;

}

return $returnValue;

}

// Add filter to apply custom_table_of_contents function to the_content

add_filter('the_content', 'custom_table_of_contents');

// hiển thị frontend list table content

// Add shortcode to display custom table of contents

function ngoinhaweb_list_shortcode() {

ob_start(); ?>

</div>

<?php

// Retrieve the current post content

global $post;

$content = $post->post_content;

// Apply custom table of contents function

$content_with_toc = custom_table_of_contents($content);

// Output the modified content

echo $content_with_toc;

</div>

<?php

return ob_get_clean();

}

add_shortcode('ngoinhaweb-list', 'ngoinhaweb_list_shortcode');

css

.ngoinhaweb-list-content {
    display: none;
}
.ngoinhaweb-list-container {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 20px;
}

.ngoinhaweb-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.ngoinhaweb-list-title {
    font-weight: bold;
}

.ngoinhaweb-list-toggle {
    font-size: 20px;
}

.ngoinhaweb-list-content {
    margin-top: 10px;
}
/* Loại bỏ các thuộc tính của ::marker */
.ngoinhaweb-list-content ul {
    list-style-type: none;
    padding-left: 20px;
}

.ngoinhaweb-list-content ul li {
    margin-bottom: 5px;
    /* Loại bỏ các thuộc tính của ::marker */
    list-style: none;
}

.ngoinhaweb-list-content ul li {
    margin-bottom: 5px;
}
/**/
#ngoinhaweb-container {
    position: fixed;
    top: 10%;
    left: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    z-index: 9999;
    max-height: 80%;
    overflow-y: auto;
    display: none;
}

#ngoinhaweb-container.expanded {
    display: block;
}

#ngoinhaweb-container.scrolled .ngoinhaweb-toggle {
    display: none;
}

.ngoinhaweb-toggle {
    cursor: pointer;
    float: right;
}

#ngoinhaweb-container .ngoinhaweb-content {
    display: none;
}

#ngoinhaweb-container.expanded .ngoinhaweb-content {
    display: block;
}

.ngoinhaweb-content ol {
    padding-left: 20px;
}
/*h2 h3 only neo*/
.ngoinhaweb-list-content ul ul {
    display: none;
}

.ngoinhaweb-list-content ul li {
    margin-bottom: 5px;
    list-style: none;
}

.ngoinhaweb-list-content ul li a {
    text-decoration: none;
}

.ngoinhaweb-list-content ul li a:hover {
    text-decoration: underline;
}
.ngoinhaweb-list-container .ngoinhaweb-list-content {
    display: none;
}

.ngoinhaweb-list-container.active .ngoinhaweb-list-content {
    display: block;
}

100

101

102

103

104

.ngoinhaweb-list-content {

display: none;

}

.ngoinhaweb-list-container {

border: 1px solid #ccc;

padding: 10px;

margin-bottom: 20px;

}

.ngoinhaweb-list-header {

display: flex;

justify-content: space-between;

align-items: center;

cursor: pointer;

}

.ngoinhaweb-list-title {

font-weight: bold;

}

.ngoinhaweb-list-toggle {

font-size: 20px;

}

.ngoinhaweb-list-content {

margin-top: 10px;

}

/* Loại bỏ các thuộc tính của ::marker */

.ngoinhaweb-list-content ul {

list-style-type: none;

padding-left: 20px;

}

.ngoinhaweb-list-content ul li {

margin-bottom: 5px;

/* Loại bỏ các thuộc tính của ::marker */

list-style: none;

}

.ngoinhaweb-list-content ul li {

margin-bottom: 5px;

}

/**/

#ngoinhaweb-container {

position: fixed;

top: 10%;

left: 10px;

background-color: #fff;

border: 1px solid #ddd;

padding: 10px;

z-index: 9999;

max-height: 80%;

overflow-y: auto;

display: none;

}

#ngoinhaweb-container.expanded {

display: block;

}

#ngoinhaweb-container.scrolled .ngoinhaweb-toggle {

display: none;

}

.ngoinhaweb-toggle {

cursor: pointer;

float: right;

}

#ngoinhaweb-container .ngoinhaweb-content {

display: none;

}

#ngoinhaweb-container.expanded .ngoinhaweb-content {

display: block;

}

.ngoinhaweb-content ol {

padding-left: 20px;

}

/*h2 h3 only neo*/

.ngoinhaweb-list-content ul ul {

display: none;

}

.ngoinhaweb-list-content ul li {

margin-bottom: 5px;

list-style: none;

}

.ngoinhaweb-list-content ul li a {

text-decoration: none;

}

.ngoinhaweb-list-content ul li a:hover {

text-decoration: underline;

}

.ngoinhaweb-list-container .ngoinhaweb-list-content {

display: none;

}

.ngoinhaweb-list-container.active .ngoinhaweb-list-content {

display: block;

}

// Function sổ ra và thu gọn
function ngoinhaweb_toggle_list() {
    jQuery('.ngoinhaweb-list-toggle').on('click', function() {
        var $container = jQuery(this).closest('.ngoinhaweb-list-container');
        var $content = $container.find('.ngoinhaweb-list-content');

        if ($content.is(':visible')) {
            // If content is visible, hide it and change icon
            $content.hide();
            jQuery(this).removeClass('dashicons-arrow-up-alt2').addClass('dashicons-arrow-down-alt2');
        } else {
            // If content is hidden, show it and change icon
            $content.show();
            jQuery(this).removeClass('dashicons-arrow-down-alt2').addClass('dashicons-arrow-up-alt2');
        }
    });
}

jQuery(document).ready(function($) {
    ngoinhaweb_toggle_list();
});

// Function sổ ra và thu gọn

function ngoinhaweb_toggle_list() {

jQuery('.ngoinhaweb-list-toggle').on('click', function() {

var $container = jQuery(this).closest('.ngoinhaweb-list-container');

var $content = $container.find('.ngoinhaweb-list-content');

if ($content.is(':visible')) {

// If content is visible, hide it and change icon

$content.hide();

jQuery(this).removeClass('dashicons-arrow-up-alt2').addClass('dashicons-arrow-down-alt2');

} else {

// If content is hidden, show it and change icon

$content.show();

jQuery(this).removeClass('dashicons-arrow-down-alt2').addClass('dashicons-arrow-up-alt2');

}

});

}

jQuery(document).ready(function($) {

ngoinhaweb_toggle_list();

});

js ver 2

// Function sổ ra và thu gọn
function ngoinhaweb_toggle_list() {
    jQuery('.ngoinhaweb-list-toggle').on('click', function() {
        var $container = jQuery(this).closest('.ngoinhaweb-list-container');
        var $content = $container.find('.ngoinhaweb-list-content');

        if ($content.is(':visible')) {
            // If content is visible, hide it and change icon
            $content.hide();
            jQuery(this).removeClass('dashicons-arrow-up-alt2').addClass('dashicons-arrow-down-alt2');
        } else {
            // If content is hidden, show it and change icon
            $content.show();
            jQuery(this).removeClass('dashicons-arrow-down-alt2').addClass('dashicons-arrow-up-alt2');
        }
    });
}

jQuery(document).ready(function($) {
    ngoinhaweb_toggle_list();

    // Thêm anchor vào các tiêu đề h2 và h3
    jQuery('.ngoinhaweb-list-content h2, .ngoinhaweb-list-content h3').each(function() {
        var headingId = jQuery(this).attr('id');
        var headingText = jQuery(this).text();
        var listItem = '<li><a href="#' + headingId + '">' + headingText + '</a></li>';
        jQuery('.ngoinhaweb-list-navigation').append(listItem);
    });

    // Xử lý sự kiện trượt đến khi nhấp vào các liên kết trong menu
    jQuery('.ngoinhaweb-list-navigation a').on('click', function(e) {
        e.preventDefault();
        var targetId = jQuery(this).attr('href');
        jQuery('html, body').animate({
            scrollTop: jQuery(targetId).offset().top
        }, 1000);
    });
});

// Function sổ ra và thu gọn

function ngoinhaweb_toggle_list() {

jQuery('.ngoinhaweb-list-toggle').on('click', function() {

var $container = jQuery(this).closest('.ngoinhaweb-list-container');

var $content = $container.find('.ngoinhaweb-list-content');

if ($content.is(':visible')) {

// If content is visible, hide it and change icon

$content.hide();

jQuery(this).removeClass('dashicons-arrow-up-alt2').addClass('dashicons-arrow-down-alt2');

} else {

// If content is hidden, show it and change icon

$content.show();

jQuery(this).removeClass('dashicons-arrow-down-alt2').addClass('dashicons-arrow-up-alt2');

}

});

}

jQuery(document).ready(function($) {

ngoinhaweb_toggle_list();

// Thêm anchor vào các tiêu đề h2 và h3

jQuery('.ngoinhaweb-list-content h2, .ngoinhaweb-list-content h3').each(function() {

var headingId = jQuery(this).attr('id');

var headingText = jQuery(this).text();

var listItem = '<li><a href="#' + headingId + '">' + headingText + '</a></li>';

jQuery('.ngoinhaweb-list-navigation').append(listItem);

});

// Xử lý sự kiện trượt đến khi nhấp vào các liên kết trong menu

jQuery('.ngoinhaweb-list-navigation a').on('click', function(e) {

e.preventDefault();

var targetId = jQuery(this).attr('href');

jQuery('html, body').animate({

scrollTop: jQuery(targetId).offset().top

}, 1000);

});

Mua Tên Miền Hành Trình Tạo Dựng Trực Tuyến

Còn lỗi là chưa ẩn được p ngoài p tự do có class nội dung. 2 là chưa làm được cái click link neo từ box mục lục nhảy đến tiêu đề h2, h3 được click. Mở rộng là khi lăn chuột xuống màn hình dọc 800px sẽ xuất hiện 1 nút. click sổ ra list danh mục tiêu đề h2 và h3 cũng có thể bấm nhảy đến bài.. kéo chạm đến footer thì sẽ ẩn đi, kéo ngược lên thì hiển thị lại.

M	T	W	T	F	S	S
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

Mở đầu chiến lược

Quản lý vận hành

Kế hoạch nội dung

Công nghệ hệ thống

Booking triển khai
kinh doanh đa kênh

Duy trì 24h liên tục
chăm sóc khách hàng

Hệ thống độc quyền
hỗ trợ hợp tác liên kết

Hệ thống hỗ trợ
đối tác thành viên

Mở đầu chiến lược

Quản lý vận hành

Kế hoạch nội dung

Công nghệ hệ thống

Booking triển khai
kinh doanh đa kênh

Duy trì 24h liên tục
chăm sóc khách hàng

Hệ thống độc quyền
hỗ trợ hợp tác liên kết

Hệ thống hỗ trợ
đối tác thành viên

0989 589 077

Chia sẻ code tabe of content chuẩn nhất

Ngôi Nhà Web

My Account

Mở đầu chiến lược

Quản lý vận hành

Kế hoạch nội dung

Công nghệ hệ thống

Booking triển khai kinh doanh đa kênh

Duy trì 24h liên tụcchăm sóc khách hàng

Hệ thống độc quyền hỗ trợ hợp tác liên kết

Hệ thống hỗ trợ đối tác thành viên

Mở đầu chiến lược

Quản lý vận hành

Kế hoạch nội dung

Công nghệ hệ thống

Booking triển khai kinh doanh đa kênh

Duy trì 24h liên tụcchăm sóc khách hàng

Hệ thống độc quyền hỗ trợ hợp tác liên kết

Hệ thống hỗ trợ đối tác thành viên

0989 589 077

Ngôi Nhà Web

Related articles

My Account

Booking triển khai
kinh doanh đa kênh

Duy trì 24h liên tục
chăm sóc khách hàng

Hệ thống độc quyền
hỗ trợ hợp tác liên kết

Hệ thống hỗ trợ
đối tác thành viên

Booking triển khai
kinh doanh đa kênh

Duy trì 24h liên tục
chăm sóc khách hàng

Hệ thống độc quyền
hỗ trợ hợp tác liên kết

Hệ thống hỗ trợ
đối tác thành viên