FAQ Accordion for homepage

Hey all,

I’m new and still unfamiliar with REW - just wondering if anyone has added an accordion style FAQ section to their site and knows how to do it?

Something like this:

I like the idea of FAQ content for SEO on my homepage, but the accordion is needed because it helps to hide the content from the user and lessen the amount of page they have to scroll on mobile devices.

Is there a way to make a snippet produce an FAQ accordion?

Thanks,

1 Like

I’ve wanted to do something like this for years but estimates for this type of work are so expensive it’s not even worth it IMO. I can’t imagine it would cost less than $2500. It would have been great if REW still allowed shared/collaborative projects where multiple site owners could share in the cost of these types of customizations but they did away with that unfortunately.

Calgary Real Estate Buyer Resources | REP Calgary Homes - Is this what you’re referring to?

Title?

content.

1 Like

Hey there!

Yeah that’s what I’m talking about - something where the answer is hidden until you click on the question. Did you use a customized snippet to set this up?

Thanks,

Hey Brian, that’s actually not accurate. We are completely fine with (and in fact encourage) collaborative projects. I think that gets confused with the fact that we don’t “support” collaborative projects (in terms of free customer support post-launch)

Collabs are still “custom projects” (they are not part of the “product” so collaborators need to know and be aware that not only is there a development cost to the project, but any ongoing maintenance will bear a cost of they build something custom.

Which hopefully makes sense.

By all means do a collab project.

Also, there is another path - and that is right here in the community (what this consumer just did).

Customers (community members) are where we get some (most) of our great ideas.

And so to advocate for a feature (and help spec it) on the community is a great way to get it on the roadmap.

Of course, it can’t be a 1 of (or something 3 or 5 people want) there needs to be a clear demand for large adoption (otherwise the framework becomes a mess of too many features that only a few people use).

But you certainly can spec it out here if you like and we’re happy to participate in the discussion.

FYI - I do take a contrarian positon on this feature however - I do not think anything should be “hidden” for design.

If it’s great content, why hide it?

Here is an example of what we do with FAQ’s on our own personal site - https://www.carlycarey.com

Technically I pasted the code here too so you could just take it here as well.

@Morgan can clarify this though, I am not sure on the REW rules in terms of copying someone’s code. You may have to modify it to some extent as they have something in their TOS about this. Which I believe is more content related but could extend to the code as well.

Also you can’t just copy and paste everything from someone’s site. Often you need style changes in there as well.

1 Like

Rules are pretty simple - if it’s using standard HTML code that is out there and are just viewing source to “learn how to do it” (ie it’s not custom code) then you’re fine.

Content on the other hand (written words) you cannot copy and them modify. If you do that, you’re engaging in the creation of what is referred as a “derivative work” which still falls under the category of intellectual property theft and is thus illegal.

So never copy someone’s content when looking to create your own.

The same goes for “design code” (like CSS etc) - which is different than a standard feature. CSS (cascading style sheets) are custom-modified and hand written by the creator - in REW you can’t create style sheets anyways, so it’s not really a thing (you should use the CSS built into Renaissance) but it is a TOS violation to take someone else’s CSS,

But viewing source to see how a “standard” HTML element works, and then implementing that feature? No problem whatsoever :slight_smile:

1 Like

I knew I shouldn’t have said it lol… what’s the difference between copying html and css? What’s “standard HTML code” I just don’t want to be giving bad advice to users. I know everything comes back to 1/0’s in the end but that does feel like there’s a lot of room for interpretation and grey space which as a user is tough to swallow.

My guess is you are reserving that for explicit scenarios where it’s a near copy. I truly can’t be upset if someone takes the headers from a community page I created -

WHAT IS THE POPULATION IN DISCOVERY RIDGE?
vs
HOW MANY PEOPLE LIVE IN DISCOVERY RIDGE?

Where they include their own (similar) write up. That’s not a derivative, that’s a foundational piece of content that could be on all pages. Everything would be considered a derivative and nobody could write anything.

You can add custom CSS code on the website through GTM. :nerd_face:

OMG… NERD ALERT!~ (I love it!) (though technically that might be a TOS violation as well, since you’re not supposed to try to mess with REW’s framework code).

Anyways, I’m just impressed you found the hack lol

In terms of what is standard. Anything that is in the HTML libraries like HTML Tutorial

So anything that is written as part of the actual library

We don’t own HTML (no one does) it’s open-source and free to use.

However, if you see something like this (which is a clearly custom-written combination of CSS commands and elements)

You’re not allowed to take it or touch it (so never use the copy function on someone else’s code)

Try to think of it this way - no one can claim ownership or intellectual property of paint, but they certainly own the creative rights to their painting.

Does that make sense?

Edit: Actually it turns out even colors can be trademarked lol Colors That Are Trademarked

2 Likes

BTW - I should clarify (without prejudice), as long as you are not attempting to copy our code elsewhere, and you’re just trying to enhance your own site (on a REW-hosted domain) we certainly encourage creativity in the use of HTML / CSS - we love seeing it in fact.

Obviously nothing nefarious (like removing trademarks or making the “property listed by” 1 pixel high < which would be an MLS compliance violation)

But in general - if you want to flex your creative or nerd muscles (I mean that in the most flattering of contexts as I am also a nerd) - then fill your boots! :slight_smile:

In fact come here and share your ideas, ask questions etc

PS. Since we talked earlier on this thread, I was also looking into it.

I like how these guys do it - Weglot Pricing | Translate your website & grow your business

Just have to write your own CSS to make it (or have us do it) - but it’s a cool implementation. I especially like how they have an on state colour (changes to blue) when you’re on a specific question so you know where you are.

@AmyPye some great design elements on this site in general :slight_smile:

3 Likes

The details & summary elements will give you that toggle functionality out-of-the-box. HTML summary Tag

Styling these should be a pretty quick project.

So are we adding this to Renaissance as an option? (Should we add to the backlog?) :slight_smile:

My vote is for the Weglot style, but happy to hear from others on their favourite implementation.

Please do add an accordion to Renaissance! Weglot is nice and clean. I also like this example that has a card like design. See it in action at the link. (The resizing animation and color shadow is a little over the top, IMHO) F.A.Q. Accordion Style - Webflow

1 Like

I like the card idea but maybe with just a bit more padding. Feels a little squished.
I also wonder about incorporating imagery? Or is that getting to be ‘too much’?

Too much (for general use) but an option to have it / add it with a class? Why not?

Care to mock up your idea?

Agree on extra padding which would bring it closer to Renaissance style. An optional icon just to the left of the question, but still inside the card, could be neat. I can see that being an optional visual indicator to help categorize the FAQ items.

1 Like

Hey @Victor_Lozada - I like the icon idea! I mocked something up to help visualize…

3 Likes

That is fantastic!! Ideally we could drop our own icons/images in there. We’ve long wanted something like this and I can think of several uses we would do. Checklists for seller to prepare homes for listing, quarterly home maintenance, etc. Feature and benefit type lists in addition to the usual FAQ. Morgan had a great point about exposing information. I largely agree! At the same time, I think these can be very useful in certain scenarios.

1 Like

One of the things we could explore is a default open or default closed class, so you could have the flexibility of setting the default (open or closed) state on a per dropdown element.

Could be slick - @Phil Prototype? :nerd_face:

Ask (here on the forums that is) and ye shall receive!

Check out the implementation here on REW

Which FAQ version do you prefer for your real estate website?

All that is left to do is pick your favourite, and we’ll build the markup into Renaissance for the next release (about 30 days away)

Please head over to that thread and vote for your favourite :slight_smile:

1 Like