CMS Development

fkistner
Participant

"See more" button to expand a box of text

SOLVE

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: service boxes first row.PNG

 

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

0 Upvotes
1 Accepted solution
dennisedson
Solution
HubSpot Product Team
HubSpot Product Team

"See more" button to expand a box of text

SOLVE

@fkistner, looks like you got something figured out 🙂

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

looks good!

View solution in original post

0 Upvotes
8 Replies 8
clioi
Top Contributor

"See more" button to expand a box of text

SOLVE

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

0 Upvotes
hchusid
Member

"See more" button to expand a box of text

SOLVE

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!

0 Upvotes
fkistner
Participant

"See more" button to expand a box of text

SOLVE

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

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

"See more" button to expand a box of text

SOLVE

@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
Solution
HubSpot Product Team
HubSpot Product Team

"See more" button to expand a box of text

SOLVE

@fkistner, looks like you got something figured out 🙂

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

looks good!

0 Upvotes
fkistner
Participant

"See more" button to expand a box of text

SOLVE

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?

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

"See more" button to expand a box of text

SOLVE

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

Infrastructure_Services_and_Slack_-_Creative_Services_and__nav-primary_scss_—_themes.png

0 Upvotes
fkistner
Participant

"See more" button to expand a box of text

SOLVE

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.