Adds .dual-column class to the specified list element (ul or ol) when they have more than the specified number of list items, using vanilla JavaScript

multi-column-lists.js

/**
 * Multi-column long lists
 * Adds .dual-column class to the specified list element (ul or ol) when they have more than the specified number of list items
 * @param selectedList - selector of lists to run the function on. Expects an array (i.e. use querySelectorAll)
 * @param lengthToBreakAt - how many list items there should be before adding dual-column class
 */
function multiColumnList(selectedList, lengthToBreakAt) {
	var selector = selectedList;
	for (var i = 0; i < selector.length; i++) {
		var listItems = selector[i].querySelectorAll('li');
		// If there's more than the specified number of list items, apply dual-column class to the list
		if(listItems.length > lengthToBreakAt) {
			selector[i].classList.add('dual-column');
		// If there isn't, apply .single-column class to the list's parent
		} else {
			var selectorParent = selector[i].parentNode;
			selectorParent.classList.add('single-column');
		}
	}
}

multi-column-long-list-example-styling.scss

ul, ol {
  
	&.dual-column {
		column-count: 2;
		column-gap: 16px;
	}
}

multi-column-long-lists-example.js

/**
 * Apply multi-column list function to submenus in the footer if the submenu has more than 5 items
 * @uses multiColumnList() 
 */
 var multiColumnThis = document.querySelectorAll('#footer ul.sub-menu');
 multiColumnList(multiColumnThis, 5);