Hey Everyone,
I’m currently using the following code in my project to create dynamic anchor links for inter-sectional linking. The code itself works great (props to @Finsweet for getting me started) however it lacks one great feature; the ability to style the current state of the current dynamic anchor link. Below is the code:
<script>
// when the DOM is ready
$(document).ready(function() {
// create an empty array that will store link text strings
const linkTextArr = [];
// for each filter button
$('.hack4-filter-button').each((index, link) => {
// get its text content and reformat to a valid ID
let linkText = $(link).text().replace(/\W/g,'-').toLowerCase();
// set the reformatted linkText as the link href attribute
$(link).attr('href', '#'+linkText);
// push reformatted linkText to array
linkTextArr.push(linkText);
});
// for each section
//hellosign > hellosign
// streak > streak
$('.hack4-cms-anchor-section').each((index, section) => {
// set id attribute to linkTextArray value sequentially
// 1st section gets id of linkTextArr[0]
// 2nd section gets id of linkTextArr[1]
// 3rd section gets id of linkTextArr[2] and so on
$(section).attr('id', linkTextArr[index]);
});
});
</script>
Would anyone know how to add some jquery to this to allow for me to toggle .addClass & .removeClass dynamically? I tried creating based on the current href but had no luck