Jump to content

Formatting Markdown for Accordion

Recommended Posts

Site URL: http://landerfornyc.com

I am trying to break up a long page with lots of text by creating sections that have a title, a summary paragraph, and then have users click to see more information if needed. I think the best way to do this is with an accordion FAQ-style using a markdown block. I'm having 2 problems with the formatting, need troubleshooting advice! 

1) I want the page to display the title and the summary, and then have users click the "more" in the summary to get the additional bullet points. I can't figure out how to make the title and summary static, with only the bullet points hidden. Right now, it shows the first title and summary, but then only shows the summary for each section after that (the title shows up when you expand the section before it). Any advice? 

2) Is there a simple way to put an image next to each section, tied to the placement of the title and summary (even when the section is expanded). Looking for tips on how to float the image on the right or left next to the text, but keep it aligned with the right section. 

The JQuery code i'm using is: 

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script> $(document).ready(function(){
$('.markdown-block .sqs-block-content h2').css('cursor','help');
$(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle();
$(".markdown-block .sqs-block-content h2").click(function()
{$(this).nextUntil("h2").slideToggle();}); }); </script>

And the format of the markdown is: 

### Title
## Summary
*bullets

### Title
## Summary
*bullets

### Title
## Summary
*bullets

Link to comment
  • Replies 0
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.