Jan 17, 2023
White Arrow icon
Back to all Elements

Glossary

A clonable for creating an Alphabetical glossary

** Advanced Coding **

Most of the functions on the glossary lobby page are made with JavaScript. This fact makes this clonable a bit more complex for custom changes. Almost any structural change to the glossary CMS items must be accompanied with change in the code.

The first part of the code deals with each item on the list:

  1. We go over each item and find the first letter of the item name.
  2. Then we use this letter to create an anchor by assigning it to the item's ID
  3. Then we add it to a custom attribute (data-letter) that we later read to make group separations.

* Those items are kept hidden to only later show 1 for each group

const item_names = document.querySelectorAll('.glossary-h2');
 const letters = [];

 item_names.forEach((item, index)=>{
   let name = item.innerHTML;
   let first_char = name.charAt(0);

   item.parentElement.parentElement.querySelector('.letter_anchor').setAttribute("id", first_char);
   item.parentElement.parentElement.querySelector('.glossary-hidden-letter').setAttribute("data-letter", first_char);
   item.parentElement.parentElement.querySelector('.glossary-hidden-letter').innerHTML = first_char;

   if (letters.indexOf(first_char) === -1) {
     letters.push(first_char);
   }
 })

Copy

Next piece of code creates an array of all the ABC letters.

Then we add href attribute to each item on this array, only if it also exists on the previous array of all glossary items.

 // Letter Links
 const alpha = Array.from(Array(26)).map((e, i) => i + 65);
 const alphabet = alpha.map((x) => String.fromCharCode(x));
 const links_wrap = document.getElementById('links_wrap');

 alphabet.forEach((letter_link, index)=>{
   let a = document.createElement("a");
   a.innerHTML = letter_link;
   a.setAttribute("class", 'term-link');

   if (letters.includes(letter_link)) {
     a.setAttribute("href", '#' + letter_link);
   }

   links_wrap.appendChild(a);
 })

Copy

Last part of the code is the one that shows the relevant letters for each group and add a seperator right before each item.

* This separator display property is block, which create the seperation

// Show Letter headlines for each group
 const elementArray = document.getElementsByClassName("glossary-hidden-letter");
 const usedLetters = new Set([]);
 
 for (let i = 0; i < elementArray.length; i++) {
   const letter = elementArray[i].getAttribute("data-letter");
   
   if (usedLetters.has(letter) === false) {
     usedLetters.add(letter);
     createLetterLink(elementArray[i]);
   }
 }

 // Create seperation
 function createLetterLink(element) {
   element.classList.add('glossary-letter');
   var spacer = document.createElement('div');
   spacer.classList.add('spacer');
   var parent = element.parentNode;
   var list = element.parentNode.parentNode;
   list.insertBefore(spacer, parent);
 }

Copy

Preview:

browser mockup
Share:
Heart icon

The videos Kurzgesagt channel creates are so beautifully animated, that I almost forget that I learn so much while watching them!

Might also interest you:

3d Video Slider (swiper.js)

Cloneable
CMS
JavaScript

A 3d slider with video items, plays and pauses on click & slide change.

Read more
Blue arrow iconWhite Arrow icon

Dynamic Height

Code
Tricks
JavaScript

A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.

Read more
Blue arrow iconWhite Arrow icon

Desktop Grid, Mobile Slider

Cloneable
Tricks
Layout

Change Webflow's Slider to act as a "regular" grid block on desktop, but go back to Slider on Tablet and smaller screens.

Read more
Blue arrow iconWhite Arrow icon