CSS question... hide/reveal content w/o scripting?

rokrok
Posted:
in General Discussion edited January 2014
okay, i've read a LOT of info on CSS the past few days, and it got me to thinking about an issue i have been wanting a solution to WITHOUT resorting to scripting (because it really shouldn't NEED scripting, in theory).



my site will have a FAQ page. maybe around 20 questions... each will have a paragraph or two worth of explanation. in the old, old days, you'd make a page for each answer, but that's site bloat i don't want. there's the scripting method, but my brain's pretty full these days to figure it out. same holds for flash.



but why couldn't you selectively hide/show blocks of content, depending on links you click, all done through css. that way, it'll also degrade gracefully back to older browsers, where you might lose the effect, but all the content is there. or if you have javascript turned off, you still have access to the answers. basically, like disclosure triangles for each question to reveal its answer.



it seems to me like this should be possible, but i have yet to find anyone tackling the idea, or any examples of where someone has tried and succeeded. any thoughts or URLs someone can point me to?



thanks in advance...

Comments

  • Reply 1 of 7
    rokrok Posts: 3,519member
    Quote:

    Originally posted by segovius

    Not sure what you mean but you could hide specific Divs with display: none; and stipulated which ones in certain stylesheets that you switch on clicking a link - is that the kind of thing ?



    exactly... have you seen anyone try to do this?
  • Reply 2 of 7
    rokrok Posts: 3,519member
    Quote:

    Originally posted by segovius

    Actually, it's not the site I meant - just checked. Will try to remember...



    i've been checking alistapart and zeldman's linked sites... haven't seen anyone do it yet, but it screams to the whole point of css and zeldman's book: have design and accessibility functionality, while degrading gracefully to older browsers and other instances. because of that, i have to assume SOMEone has tried this.



    i'll keep looking, too. if i find anything, i'll post it here.
  • Reply 3 of 7
    cowerdcowerd Posts: 579member
    AFAIK you need to call the DOM so scripting is needed. Even if you just swap style sheets to hide IDs you need to javascript the link.



    see http://evolt.org/article/Collapsible...831/index.html for a script or look at http://whatdoiknow.org for source.
  • Reply 4 of 7
    rokrok Posts: 3,519member
    Quote:

    Originally posted by cowerd

    AFAIK you need to call the DOM so scripting is needed. Even if you just swap style sheets to hide IDs you need to javascript the link.



    see http://evolt.org/article/Collapsible...831/index.html for a script or look at http://whatdoiknow.org for source.




    actually, i think that will do the trick (though if anyone finds a pure css way to pull this off, that'd be great).
  • Reply 5 of 7
    There is no pure CSS way to pull it off. XHTML and CSS are essentially markup languages, which is static by nature. If you want to do anything dynamic, you have to introduce scripting. You're basically saying you want to execute a command... well, you have to tell something to execute a specific command. You also have to write out that command.



    It's not that hard, really. Do not fear the JavaScript.
  • Reply 6 of 7
    rokrok Posts: 3,519member
    Quote:

    Originally posted by LoCash

    There is no pure CSS way to pull it off. XHTML and CSS are essentially markup languages, which is static by nature. If you want to do anything dynamic, you have to introduce scripting. You're basically saying you want to execute a command... well, you have to tell something to execute a specific command. You also have to write out that command.



    It's not that hard, really. Do not fear the JavaScript.




    it's not exactly a "fear" thing, just a "brain is full" thing. but yeah, it's looking like it will have to introduce some sort of scripting to pull off the switch.
Sign In or Register to comment.