Collapse text for FAQ - not using javascript
mbridge87
Registered Users Posts: 85 Big grins
Hello,
I hope you guys can help with this. Hopefully it's a fairly quick one.
On my FAQ page I'd like to have the answers reveal after clicking the questions, or a "+" symbol, rather than all being open. If you look now there's so much text it's pretty off putting.
http://www.maxbridge.co.uk/FAQs
I know that this could be done using java script but I've also read that this can have a negative impact on SEO.
Is there any way I could do this without using java script?
Oh and yeah I know the image title says Terms and Conditions. It's a recent change and I'll alter that soon.
Thanks.
I hope you guys can help with this. Hopefully it's a fairly quick one.
On my FAQ page I'd like to have the answers reveal after clicking the questions, or a "+" symbol, rather than all being open. If you look now there's so much text it's pretty off putting.
http://www.maxbridge.co.uk/FAQs
I know that this could be done using java script but I've also read that this can have a negative impact on SEO.
Is there any way I could do this without using java script?
Oh and yeah I know the image title says Terms and Conditions. It's a recent change and I'll alter that soon.
Thanks.
0
Comments
You might try a search looking for "collapse text html".
--- Denise
Musings & ramblings at https://denisegoldberg.blogspot.com
Thank you for the quick response.
I did have a google search before posting here but I can't seem to find anything. All the solutions use javascript.
Bit stumped...
Max
I remember seeing someone do this on smug but I suspect it was on legacy so javascript may have been in play there.
--- Denise
Musings & ramblings at https://denisegoldberg.blogspot.com
Nice find! There's a cool accordion effect on that site as well! I tested it, and it worked! I have a use for that, so thanks for the tip to that site!
Thanks so much for your help with this. I did try to use the one you suggested but there was a slight issue with the page jumping when clicking on items, if the list was larger than full screen. I've managed to find another method to do this (Takes me ages as I never know which terms to search with) but I'm having a little trouble with this one. I was hoping the HTML / CSS gurus on here could help.
This is a link to the code I'm working on:
http://jsfiddle.net/E4acF/1083/
I got the basis of this from this site:
http://www.mraffaele.com/blog/2011/10/25/css-accordion-no-javascript/comment-page-1/#comment-1111
What I've created is just for test purposes but once I know it works I'll add all the proper wording etc.
Problem is I would like the content boxes (when they open) to automatically fit the length of the content. I've managed to get somewhere but it's always the last few hurdles that I fall down on. I believe I could edit "overflow" to get this to work but for the life of me I cannot figure out how. Also if I set the Height to auto or 100% you lose the transitions.
Help from anyone would be massively appreciated.
WOW GREAT IDEA!!! Err, if you don't mind I will lurk and learn and maybe use eventually...
My thought was, code for a folder. Each title is an image (or not), not just text, click and the folder description is revealed....
The type of menu your talking about is one that Denise linked to near the beginning of this. Take a look at this:
http://www.thecssninja.com/css/css-tree-menu.
That's nice too, but I think I'll stick with my visitor sitemap, generated by Nicholas' super easy tool (http://www.dgrin.com/showthread.php?t=240752).
http://www.joinrats.com/Sitemap/
What I like about the code you're working with is how you can provide descriptions, and the example page is beautifully formatted.
http://jsfiddle.net/8v799/
Annoyingly I'm now thinking that I won't use it. Reason being that it doesn't work in as many places as I would like. It won't work in versions on IE older than 8 and I've tried it on a few different mobile browsers of which some don't work.
If anyone knows of a way to fix that I would be so so grateful. As it stands I'm probably going to revert back to simply having all of the text just there (no animations etc.) Unless someone can suggest a solution....
I can't thank you enough for doing all this work. I have grabbed the code just in case.
Do people really still try to code for earlier than IE8? How significant are those browsers? I have thought IE8 was about to bite the dust as well.
?
I still don't think I'll be using it unless I can get it to work on more browsers...
Does anybody have any ideas for that?? I was looking into "feature detection" but I don't really understand how to implement it. Anyone know about this? From what I believe it's the "[type=radio]:checked ~ label." that causes the trouble on other browsers.
If anyone has any ideas I'd be very thankful