- This topic is empty.
July 19, 2018 at 11:03 pm #274390
I am beginning to think this is impossible. So I am hoping if nothing else, you can confirm that this is indeed impossible and I can get on with examining other design options.
I have two long articles on my home page. I want to show only the first paragraph and then give the first-time visitor the option to expand and read the rest. This is a standard design technique. So I used the radio-button technique to expand the article and it works great. Now I want the trigger that hides the expanded version to be located at the END of the article so the user does not have to search for it.
The problem is that the radio buttons do not work that way; they can only show-hide sections immediately below them.
So I am trying to figure out a way to either trigger the original radio button from the end of the article, reposition the original radio button to the end once article is expanded, or simply find another way to create this effect without scripts.
Here is a the fiddle to help you visualize what I am talking about:
The fiddle shows a modal option I have been playing with, but I would prefer not to go that way as I am uncertain how pop-up blockers react to them.
Any ideas?July 20, 2018 at 12:48 am #274394
You can tie multiple labels to one form control https://jsfiddle.net/c7owsq1r/
The HTML works but it might be a bit iffy as far as accessibility goes.July 20, 2018 at 3:31 am #274401
OMG. I can’t believe that works! That never occurred to me yet it is so simple.
Brilliant! Thank you very very much.
Ummmm…. quick question. What exactly are you concerned about regarding accessibility? Do you mean browsers? While I am not concerned with older browsers at all, I can’t really see how the label tag would cause any problems. Or do you mean something else?July 20, 2018 at 3:37 am #274402
I’m thinking more along the lines of screen reading software (for those who don’t “see” or use websites the same way as sighted people), but I haven’t done any further reading on it.July 20, 2018 at 4:11 am #274403
Ahhh. I’m not worried. I’ve been reading a lot on ARIA and am certain I can get around it.
Again, thanks so much. CSS-Tricks was one of my first research stops but the only reference required JS. So I had really given up hope.
I also asked this question on stack exchange and did not get one answer. I provided an answer myself, but gave you full credit and a link back to this post.
Hopefully you don’t mind. If you do, let me know and I will see about deleting it. (I hope you don’t as I think this is a pretty cool technique that does not seem to be widely written about.)July 20, 2018 at 9:51 am #274416
No problem – I’m not an active contributor over there so thanks for the backlink.
- The forum ‘CSS’ is closed to new topics and replies.