CSS question... hide/reveal content w/o scripting?
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...
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
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?
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.
see http://evolt.org/article/Collapsible...831/index.html for a script or look at http://whatdoiknow.org for source.
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).
It's not that hard, really. Do not fear the JavaScript.
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.