Title: A Solution for Creating Nested Lists in Rich-Text Fields with jQuery
Here’s a solution I recently discovered for creating nested lists in rich-text fields using jQuery.
The issue I faced was how to create sub-bullets in lists since Webflow’s rich-text editor does not directly support them. The goal was to take lists where list items marked with ~ or ~~ at the start of the text would be turned into sub-bullets.
After a lot of experimentation and tweaks, I came up with a jQuery script that does just that. Here’s a step-by-step guide on how to implement this solution:
Step 1:
We’re going to use ~ as an indicator for a sub-bullet and ~~ for a sub-sub-bullet in our list items.
For example, create your list like this:
<ol>
<li>List Item 1</li>
<li>~Sub List Item 1</li>
<li>~~Sub Sub List Item 1</li>
<li>List Item 2</li>
</ol>
Step 2:
Add the following jQuery code to your Webflow project. This script will process your lists on document ready:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$('ol, ul').each(function() {
let $list = $(this);
let $items = $list.children('li');
let stack = [$list];
$items.each(function() {
let $item = $(this);
let text = $item.text();
let level = text.startsWith('~') ? text.split('~').length - 1 : 0;
if(level > 0) {
text = text.replace(/^~+/g, '').trim();
$item.text(text);
}
while(stack.length > level + 1) {
stack.pop();
}
if(level >= stack.length) {
let $newList = $('<ol>').addClass(level === 1 ? 'alphabetical' : 'roman');
$newList.append($item.detach());
let $parentLi = stack[stack.length - 1].children('li').last();
if ($parentLi.length) {
$parentLi.append($newList);
} else {
console.error('Expected a parent <li> but none was found. This might be due to incorrect nesting of "~"s.')
}
stack.push($newList);
} else if (stack[level]) {
stack[level].append($item.detach());
} else {
console.error('Unexpected condition: no stack[level] found. Please check your list structure.')
}
});
});
});
</script>
Step 3:
Style your lists using CSS. You can use the class names alphabetical and roman which have been added to nested lists:
ol.alphabetical {
list-style-type: lower-alpha; /* a., b., c., etc */
margin: 0; /*optional*/
}
ol.roman {
list-style-type: lower-roman; /* i., ii., iii., etc */
margin: 0;/*optional*/
}
And That’s It!
The result should look like this:
<ol>
<li>List Item 1
<ol class="alphabetical">
<li>Sub List Item 1
<ol class="roman">
<li>Sub Sub List Item 1</li>
</ol>
</li>
</ol>
</li>
<li>List Item 2</li>
</ol>
I hope this solution helps others who might face the same challenge. If you have any comments or improvements, please don’t hesitate to share!