Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Show-Hide effect using separate triggers: CSS only

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #274390
    Smokva
    Participant

    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:
    https://jsfiddle.net/547dksmx/132/

    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?

    #274394
    Beverleyh
    Participant

    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.

    #274401
    Smokva
    Participant

    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?

    #274402
    Beverleyh
    Participant

    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.

    #274403
    Smokva
    Participant

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

    #274416
    Beverleyh
    Participant

    No problem – I’m not an active contributor over there so thanks for the backlink.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.