topic Re: "See more" button to expand a box of text in CMS Development

"See more" button to expand a box of text

fkistner — Mon, 14 Jan 2019 21:07:40 GMT

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.)

Re: "See more" button to expand a box of text

dennisedson — Tue, 15 Jan 2019 21:50:50 GMT

@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.

Re: "See more" button to expand a box of text

dennisedson — Wed, 16 Jan 2019 19:54:16 GMT

@fkistner, looks like you got something figured out 🙂

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

looks good!

Re: "See more" button to expand a box of text

fkistner — Wed, 16 Jan 2019 20:12:35 GMT

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?

Re: "See more" button to expand a box of text

fkistner — Wed, 16 Jan 2019 20:36:09 GMT

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.

Re: "See more" button to expand a box of text

dennisedson — Wed, 16 Jan 2019 20:45:07 GMT

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

Re: "See more" button to expand a box of text

hchusid — Fri, 16 Aug 2019 15:23:32 GMT

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!

Re: "See more" button to expand a box of text

fkistner — Fri, 16 Aug 2019 15:29:39 GMT

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

Re: "See more" button to expand a box of text

clioi — Wed, 14 Jun 2023 15:50:58 GMT

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

Re: "See more" button to expand a box of text

BAdair7 — Sun, 07 Jul 2024 21:54:43 GMT

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