Jump to content

Markdown no longer working in Simple List Autolayout description

Recommended Posts

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:

 

 

Screenshot 2024-08-18 at 9.26.19 PM.png

Screenshot 2024-08-18 at 9.25.35 PM.png

Link to comment

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>

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.