rockmast Posted August 19 Share Posted August 19 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: Link to comment
rockmast Posted August 19 Author Share Posted August 19 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> tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment