How to create “Read More” dropdowns inside Auto Layouts in 7.1

• 00
• 01
• 02
• 99

Note: this post contains affiliate links to awesome products that I use and/or highly recommend. That means that if you make a purchase on that site through my link I may get a commission, at no extra charge to you. I solemnly swear I’ll put those earnings to good use to continue to provide my cat with the royalty lifestyle she deserves.

We’ve covered Auto Layouts on this blog multiple times already since they’re so so versatile.

We’ve also covered Accordion Block customizations and even collapsible form sections in previous tutorials.

And today, we’ll be combining a little bit of both into one AWESOME customization!

Thanks to a Club member I learned that we can use markdown markup inside the description area of Auto Layouts, and based on that cool realization today we’ll be building a “Read more” dropdown for Auto Layouts in 7.1, that can help us hide/show extra information without the need to clickthrough to another page.

Interested? Then hop onto the video to learn how to set everything up for your project!

PLUS, if you’d like to be able to:

1. Easily turn the dropdown link into a BUTTON,

2. and, choose whether the original slide button element (when enabled) sits INSIDE or OUTSIDE of the dropdown.

Make sure to check out this amazing Text Expand plugin by SQS Mods! (affiliate)

Note: in case you’re as curious as I am, in their demo, they’re using their Social Icons Everywhere plugin (affiliate) to display those icons!

Tutorial

Overview & timestamps

I’ll be working with the Auto Layout Simple List in the example site, but the code can be used for the Slideshow Banner and Carousel Auto Layouts as well! So, let’s go ahead and get started:

1. 00:00 - Intro

2. 01:00 - Quick overview of the setup

   First of, I’ll walk you through the layout that I’m using for the example (although any of the other two options will work) and we’ll look into how to add the markup necessary to create that trigger “Read More” or “Read Bio” text, to make things super easy to target through the code.

3. 03:41 - Adding the dropdown functionality

   Once we have the dropdown trigger in place, we’ll move onto adding the script necessary to create the actual collapsible functionality. We’ll see what each part of the function does, in case you want/need to adapt it to your own project requirements.

4. 07:11 - Styling the dropdowns with CSS

   Last but not least, we’ll hop onto the Custom CSS window to set up the initial “hidden” state of the dropdown content, style the “Read Bio” link and add in the alternative symbol that we want to display when the dropdown is open, to indicate it can be closed up again. We’ll also take a minute to check things out on mobile to make sure everything works correctly.

And just like that, we’ll be done with our new collapsible sections!

I hope you found this tutorial helpful for your current project and don’t forget to check out SQS Mods plugins (affiliate) to customize your dropdowns even more!

Until next time,

B.

---

Full code

jQuery library (if needed)

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Footer Code Injection Section

<!-- 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 Window

/*HOW TO CREATE A "READ MORE" DROPDOWN INSIDE AUTO LAYOUTS IN 7.1*/
.list-item-content__description h6 ~ * {
  display: none;
}

//To style the "Read More" link
.list-item-content__description h6 {
  align-items: center;
  border-bottom: 1px solid #152944;
  display: flex;
  cursor: pointer;
  font-size: 14px;
  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: '-';
}