How to exclude sections from Oxygen’s Section Indicator

Composite Elements are one of the new features to be introduced in Oxygen 3.7 Alpha 1.

The Section Indicator composite element adds circular dots that automatically link to all the sections available on the page.

It can be seen in action on our Composite Elements demo page and on the official demo page.

Note: Back To Top button is currently broken on our demo page because of custom code that has been added for smooth scrolling for hash links generated by the composite elements.

One problem with the Section Indicator element is that it collects and shows *all* the section elements including like those in the sitewide footer and not just in the actual content area. This is most likely not how you want it to work.

This tutorial shows how we can exclude specific sections from Section Indicator’s code.

In the Oxygen editor, select the “Section Indicator Code” Code Block component inside the Section Indicator.

In JavaScript panel, change

jQuery('section').each( function() {

to

jQuery('section').not('#section-777-285, #section-20-225').each( function() {

where section-777-285 and section-20-225 are the IDs of the sections you want to exclude.

Also, change

var sections = document.querySelectorAll('section');

to

var sections = document.querySelectorAll('section:not(#section-777-285):not(#section-20-225)');

Change the section IDs as needed.

Reference