"See more" button to expand a box of text

[fkistner]

Hi world,
I am creating a page with boxes of text each describing a service. Here, check it out: http://www-alphaserveit-com.sandbox.hs-sites.com/infrastructure-services (the boxes start about halfway down the page)

I have more text I need to add to each of the boxes, but that brings up two issues: they're not all the same length, so they look terrible stacked in rows like that. Secondly, and more importantly, there is TOO MUCH text. It's hard to look at. We really like the way it looks with just a couple sentences as shown here: 

So what we want to do is add a clickable element at the bottom of each that says "see more" and when you click it, it expands the box down to reveal the rest of the information. I would even be okay with hoverable instead of clickable, if that's easier for some reason. Is this possible with hubspot's tools, or do I need to create separate pages where I put the full information for each service. (Would love to avoid doing this, but it is plan B if the expandable box idea can't be done.)

[BAdair7]

How did you figure this out? We are running into the same issue, but for bios of our team members on the About Us page

[clioi]

Hello @fkistner @dennisedson could you please share how you added the read more functionality? Thanks

[hchusid]

Hi there - I think what you did for this website looks great. Can you explain how to embed the accordion module into this grid/embed the accordion into an existing module? 

Thank you!

[fkistner]

@hchusid Oh boy! I sure can try! Give me a few minutes to write something out.

[dennisedson]

@fkistner, you should be able to do this. 

I assume you would not want the first piece of text to be cut off (eg.  i am the summary of this ar....)

Not enough time now to write out the code, but i will get something to  you tomorrow. 

[dennisedson · Accepted solution]

@fkistner, looks like you got something figured out 🙂

another option would be to add a flip to the card. 

looks good!

[fkistner]

Thank you, Dennis!

Yes I am so close to having this solved. As you can apparently see, I chose to use an accordion toggle module I found on the marketplace. It works great, and I even found a way to make the heights of each box equal to the others in the row.

However, now I wish I could make the accordion toggle modules stick to the bottom of the equal sized boxes, so they could all be on the same level and not appear randomly distributed based on the length of the text in the module above them. I have tried using absolute positioning, but that messes up the equal heights and/or overlaps the text above it, because if they're all absolute then there's nothing establishing any room for the module within the group. 

Any ideas about this?

[dennisedson]

@fkistner, everything is lining up on my end..  you do have a responsive issue btwn 767 and around 700px

[fkistner]

Did it! added a horizontal spacer above the accordion toggle module, then made the accordion position: absolute; bottom: 0px; so now it only overlaps the spacer! Wow! What a journey this has been. Thanks for your help.