Create ID tags for Simple List Item Titles

Hi,

I'm trying to find a way to create ID anchor links/tags with the name of each title of each item in my simple list auto layout so I can link to each from elsewhere?

For example, I created a schedule for our festival's lineup on another page and I want for viewers to be able to click on the artist name there and it will lead them to the artist's profile on our lineup page (which was created using simple-list autolayout).

So, for example, the URL I would use to link to that list item would be:

https://purplecityfest.squarespace.com/2024lineup/#artistname

We have a business account and I have been able to apply ID tags in regular code blocks using <p> id="anchorname"</p> but cannot find any way to add code to do this on top of an item in a simple list.

Thanks!

List Section has a specific ID, if you share link to page where you use List Section, I can give you this ID.

but another way I often use, add a Code Block on section above List Section, then use CSS code to move down Code Block overlap List Section (if you want to use this way, let me know, I will give the guide)

10 hours ago, tuanphan said:

List Section has a specific ID, if you share link to page where you use List Section, I can give you this ID.

but another way I often use, add a Code Block on section above List Section, then use CSS code to move down Code Block overlap List Section (if you want to use this way, let me know, I will give the guide)

Hi @tuanphan,

Thanks for replying! Here is a link to the page, and it's not a normal block with a list section - it's the Simple List autolayout, so I cannot figure out how to target each item in this type of section. 

https://purplecityfest.com/2024lineup

I would LOVE to try the CSS code you note to see if I can move the code block to over lap specific area's of the list section, it would be a bit intensive as there are 90 items (artist profiles) so I would need to make a code black for each item. One question, with this CSS code would I be able to place multiple code blocks in specific spots on the simple list?

If that doesn't work, and more ideally what I am looking for is to autogenerate ID-tags from the title of each item (ie. the artist name) in the simple list, so I can link items from elsewhere and take the user immediately to that portion of the page. For example, I am creating a schedule for the festival on a different page, and I would like for someone to be able to click the artist's name in that schedule and be taken to their profile in the lineup page (linked in this post), and NOT the top of the section.

I did come across this code, but it hasn't been working for me and I am not sure I am inputting it correctly (notes in bold: 

<script>
document.addEventListener("DOMContentLoaded", function() {
    // Select all items in the Simple List Autolayout
    const listItems = document.querySelectorAll('.simple-list-item-selector'); // Adjust this selector based on your site's structure  ** I am not sure how to adjust this correctly

    listItems.forEach(item => {
        // Get the title element from each list item
        const titleElement = item.querySelector('.title-selector'); // Adjust this selector based on your site's structure ** I am not sure how to adjust this correctly
        
        if (titleElement) {
            // Create a slug from the title text
            const titleText = titleElement.textContent || titleElement.innerText;
            const slug = titleText.toLowerCase().replace(/\s+/g, '-').replace(/[^\w\-]+/g, '');

            // Assign the slug as an ID to the item
            item.id = slug;
        }
    });
});
</script>
 

Oh wow! I can't believe I figured it out.

Here is the code I found so you can assign anchor tags generated from the title of the list item in a Simple List while keeping the text in its original case:

<script>
document.addEventListener("DOMContentLoaded", function() {
    var titles = document.querySelectorAll('.user-items-list-simple h2.list-item-content__title');
    
    titles.forEach(function(title) {
        // Get the text content and keep it as is
        var text = title.textContent.trim();
        // Generate a slug for the ID
        var id = text.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '');
        
        var listItem = title.closest('li');
        if (listItem) {
            listItem.id = id;  // Ensure the <li> has the correct ID
        }
        
        var existingAnchor = title.querySelector('a');
        if (existingAnchor) {
            existingAnchor.href = '#' + id;  // Update existing anchor
        } else {
            var anchor = document.createElement('a');
            anchor.href = '#' + id;
            anchor.textContent = text; // Keep text in original case
            title.innerHTML = ''; // Clear existing content
            title.appendChild(anchor); // Add anchor
        }
    });
});
</script>