Can I display a flat table of contents using the first letter of the document name?

[Kathryn Reddie]

I'm trying to replicate the above onto a Confluence page, with the content pulled from labels.  Here's the original webpage - https://www.anu.edu.au/directories/university-glossary

Is there any way to do it, or should I just forget about it and use a live search function instead, and get the user to start typing what they are looking for?

Thanks in advance,

Kathryn.

[David at David Simpson Apps]

Back in the early 2010s, I wrote a Confluence macro called azList which did just this.

Here's a video of it in action (though sadly no longer maintained):

https://www.youtube.com/watch?v=cElY-7mSwAs 

It was based on the following jquery plugin:

https://github.com/dvdsmpsn/azList

It should be trivial to convert into a user macro for use on Confluence Server.

It would be a wrapper which inserts the following around an unordered list:

<div class="azList">$body</div>

Then adds the following javascript:

AJS.toInit(function($){
  $.each($('.azList > ul'),function(index, value) {
    $(this).attr('id', 'azList-'+index);  // Add a unique id to each ul
    $(this).azList();
  });
});

 And a sprinkling of CSS:

.azListIndex li {
  display: inline; 
  padding: 0.2em;
}
.azListIndex li a { 
  background: #f0f0f0; 
  border-bottom: 1px solid #ccc; 
  padding: 0.1em 0.3em; 
  text-decoration:none; 
}
.azListIndex a:hover { 
  background: #dedede; 
  border-bottom:1px solid #000; 
}
.azListInitial { 
  list-style-type: none;
  font-size:1.4em;
  padding-top:0.6em;
  background:none; 
}