rockmast

Well, looks like I figured this out too. After trying a bunch of code to create a totally different target - with none of that working, I finally just added a two hashtags with no space before and after "Read Bio" so it was unique and would appear no where else on the site: ##Read Bio## and then added code to find and change all ##Read Bio## to an h6 heading. Then the original code recognized the h6 heading and it worked and applied the javascript and CSS to it as if the typical ###### Read Bio header tag was applied. haha <script>document.addEventListener("DOMContentLoaded", function() { // Select all list items in the Simple List const listItems = document.querySelectorAll('.user-items-list-simple .list-item-content__description'); // Iterate over each list item listItems.forEach(item => { // Check if the item contains '##Read Bio##' if (item.innerHTML.includes('##Read Bio##')) { // Replace '##Read Bio##' with an h6 header item.innerHTML = item.innerHTML.replace( /##Read Bio##/g, '<h6>Read Bio</h6>' ); } }); }); </script>

So a few months ago, we added custom code to create show/hide read more text in our Simple List autolayout following this person's guide: https://www.beatrizcaraballo.com/blog/dropdown-auto-layout-squarespace This worked great, but just today, I tried to add another profile to the list and it is no longer recognizing when I add the markdown hashtag code for headers, which our custom code depends on to target. I need to turn the "Read more" text into a h6 header, and when I put the 6 hashtags in, it does nothing. I read in another post, that squarespace recently changed how Markdown works, but this is not a markdown block. For our dropdown "read more" sections in the description area of each item in the simple list, we added the following custom code: Code Injection Header: <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> Code Injection Footer: <!-- HOT TO CREATE A "READ MORE" DROPDOWN INSIDE AUTO LAYOUTS IN 7.1 --> <script> $(function() { $('.list-item-content__description h6').click(function() { $(this).nextUntil('h6').slideToggle(); $(this).toggleClass('open-dropdown'); }); }); </script> Custom CSS: //To style the "Read More" link .list-item-content__description h6 { align-items: center; margin-top: 0.1rem; border-bottom: 1px solid #a5e935; display: flex; cursor: pointer; font-size: 16px; justify-content: space-between; pointer-events: auto; text-transform: uppercase; } .list-item-content__description h6::after { content: '+'; } //(Optional) To change the symbol when the dropdown is open .list-item-content__description h6.open-dropdown::after { content: '-'; } .header-nav-item a:hover { color: white !important; } I have attached screenshots to show how past list items were working and how now, it is not recognizing the Markdown header hashtags in the simple list item box:

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>

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>

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!