I have a subheading structure:
<h2>Red Fruits</h2>
<h3>Apple</h3>
<h3>Raspberry</h3>
<h2>Orange Fruits</h2>
<h3>Orange</h3>
<h3>Tangerine</h3>
<h2>Vegetables Which Are Actually Fruits</h2>
<h3>Tomato</h3>
<h3>Eggplant</h3>
The script automatically creates a table of contents: https://jsfiddle.net/voxtermen/t5nkjbvo/2/
The result looks like this:
1. Red Fruits
2. Apple
3. Raspberry
4. Orange Fruits
5. Orange
6. Tangerine
7. Vegetables Which Are Actually Fruits
8. Tomato
9. Eggplant
I want to get this result:
1. Red Fruits
1.1 Apple
1.2 Raspberry
2. Orange Fruits
2.1 Orange
2.2.Tangerine
3. Vegetables Which Are Actually Fruits
3.1 Tomato
3.2 Eggplant
What needs to be fixed in the code for this?
I tried using this script
(function($){
function tableContentPost(){
var tocList = $('#toc-list');
$('.page-content').find('h2, h3').each(function(index) {
var heading = $(this);
var title = heading.text();
var id = 'heading' + index;
// Assign an ID to the heading if it doesn't have one
if (!heading.attr('id')) {
heading.attr('id', id);
} else {
id = heading.attr('id');
}
var listItem = $('<li></li>').html('<a href="#' + id + '">' + title + '</a>');
if (heading.is('h3')) {
listItem.addClass('sub-item');
}
tocList.append(listItem);
});
}
$(document).ready(function() {
tableContentPost();
});
})( jQuery );
2
Answers
Done:
Just change
padding
tomargin
:The numbers don’t belong to a list item’s content, so using
padding
you move a list item’s content away from its number.margin
though moves the whole list item from the edge of the<ol>
.