FSTDT Forums
Community => Science and Technology => Topic started by: JohnE on October 22, 2013, 10:01:59 pm
-
Is there a way in html to make a collapsable section, kinda like our forum spoiler tags? I'd like to be able to make a page with sections that can be expanded, with additional info. Kinda like this:
* * *
Cats are awesome.
-
Hey JohnE,
If you can include a jQuery file into the page and know CSS, it's pretty easy. First, upload and include the latest version of jQuery between <head> and </head>, if you don't already have it in there.
There are various ways you can do it, but here's an example.
First, some HTML:
<span onclick="$('.spoiler').toggleClass('showme');">Spoiler</span> (click to show/hide)
<div class="spoiler">Here's some hidden text</div>
It doesn't matter what tags you use, as long as you have the onclick on the thing you'll be clicking on, and a matching class name in the thing you want to hide and show. In this case, the onclick looks for a class name of "spoiler", then adds or removes the class of "showme" from that tag. You can use whatever class names you want instead of spoiler and showme, as long as they match in the appropriate places.
The function is defined in the jQuery file, and the rest is done with CSS.
.spoiler { display: none; }
.showme { display: block; }
I don't know your experience level with CSS, so if you need some direction on actually styling it, don't hesitate to ask. :)
Edit: Just noticed a typo in one of the class names that could have made things really confusing.
-
<input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';">
<div class="spoiler"><div>
PUT CONTENT YOU WISH TO HIDE HERE
</div></div>
<style type="text/css">
/* animated spoiler CSS by Bloggersentral.com */
.spoilerbutton {display:block;margin:5px 0;}
.spoiler {overflow:hidden;background: #f5f5f5;}
.spoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}
.spoilerbutton[value="Show"] + .spoiler > div {margin-top:-100%;}
.spoilerbutton[value="Hide"] + .spoiler {padding:5px;}
</style>
I think.
-
That's a nice sliding effect, it doesn't require jQuery, and it changes text. Nice. :)
One way I use the jQuery code is to nest the onclick inside the element that gets the class name added and removed. When used with @media queries for responsive design, it's a great way to make menus collapse in mobiles, while not collapsing on a desktop.
Off the top of my head (there might be mistakes in here)...
<div class="menu menu1">
<h3 onclick="$('.menu1').toggleClass('open');">Heading 1</h3>
<ul>
<li><a...>Link 1</a></li>
<li><a...>Link 2</a></li>
<li><a...>Link 3</a></li>
</ul>
</div>
<div class="menu menu2">
<h3 onclick="$('.menu2').toggleClass('open');">Heading 2</h3>
<ul>
<li><a...>Link 1</a></li>
<li><a...>Link 2</a></li>
<li><a...>Link 3</a></li>
</ul>
</div>
CSS:
.menu ul {
display: none;
}
.open ul {
display: block;
}
.menu h3 {
background: #ccc url('plus.png') left center no-repeat;
padding-left: 25px;
}
.open h3 {
background-image: url('minus.png');
}
There would be more styling, of course, but this gives you the basic concept.
ontouchstart responds more quickly than onclick on a touch device, but unfortunately, some mobile devices still can't handle it.
Edit to add minus.png for .open h3. I knew I'd forget something. :-\
-
Thanks guys! Booker, I'm testing out your solution now and it seems to be working.
-
You're welcome, JohnE. :)
-
That's a nice sliding effect, it doesn't require jQuery, and it changes text. Nice. :)
Thanks!
Thanks guys! Booker, I'm testing out your solution now and it seems to be working.
Excellent! Glad to help.
-
You're welcome, Booker. :)
-
I can't answer your question, but I know that HTML is pronounced huh-toom-ul.
-
For a CSS2-only solution I'd probably play with the :active pseudo-tag. (Haven't done any HTML/CSS stuff for a few years though, hence no example code...)
-
Well, it nearly works:
<html>
<head>
<title>Collapsing Block</title>
<style>
.collapse .collapsecontent {display:none;}
.collapse:active .collapsecontent {display: block; }
</style>
</head>
<body>
<div class="collapse">
<p class="collapselabel">Click Me (1)</p>
<p class="collapsecontent">This is the content (1).</p>
</div>
<div class="collapse">
<p class="collapselabel">Click Me (2)</p>
<p class="collapsecontent">This is the content (2).</p>
</div>
<div class="collapse">
<p class="collapselabel">Click Me (3)</p>
<p class="collapsecontent">This is the content (3).</p>
</div>
</body>
</html>
Tested in Chromium: hidden blocks display only while the mouse button is held down. Changing every div to [/i]a[/i] makes the hidden block show when clicked, but it won't hide when clicked again.
Possibly changing the CSS visible instead of display might help, but then while the content is hidden there'd be a big empty space in the page.
-
Changing <div> to <a> would be invalid, because you'd be putting a block-level element inside an inline element. Also, changing <div> to <a> doesn't make any difference in Firefox. I didn't check in any other browsers, but not working in one popular browser is enough.
The only way I can think of doing spoilers purely through CSS without having to keep your mouse over the thing that causes it to display, is to put them in <textarea>s and change colors through textarea:focus. It wouldn't be collapsible, though, and you wouldn't be able to put images, links, or any kind of formatting in the spoilers themselves.
I think Booker's way is best for anyone who isn't already including the jQuery library in their pages. I would probably use a <span> instead of a button, but that's more a matter of preference than functionality.
<!doctype html>
<html>
<head>
<title>Collapsing Block</title>
<style type="text/css">
textarea { background: #ddd; color: #ddd; width: 50%; height: 50px; border: 1px solid #ccc; }
textarea:focus { background: #fff; color: #000; }
</style>
</head>
<body>
<p>Click in box below to read:</p>
<textarea>Here is a spoiler.</textarea>
<p>Click in box below to read:</p>
<textarea>Here is another spoiler.</textarea>
</body>
</html>
Edit to add:
Possibly changing the CSS visible instead of display might help, ...
It won't. "active" is the element's state when the mouse button is held down on it, and it's no longer active when the mouse button is released. It doesn't matter what properties you define for the active state, it will still only work when it's in that state, the same way :hover only works while the element is being hovered on.
-
Changing <div> to <a> would be invalid, because you'd be putting a block-level element inside an inline element. Also, changing <div> to <a> doesn't make any difference in Firefox. I didn't check in any other browsers, but not working in one popular browser is enough.
Using display: block is a perfectly legitimate method to over-ride the default, and in some situations it's the only sensible solution (e.g. a menu of links where you want the clickable link to be the entire menu item and not just the text within it).
You're right about chaning to <a> though. It doesn't work in Opera either. (I can't check IE.)
I think Booker's way is best for anyone who isn't already including the jQuery library in their pages. I would probably use a <span> instead of a button, but that's more a matter of preference than functionality.
I'm not at all familiar with jQuery. Is there any reason not to use plain old JavaScript?
It won't. "active" is the element's state when the mouse button is held down on it, and it's no longer active when the mouse button is released. It doesn't matter what properties you define for the active state, it will still only work when it's in that state, the same way :hover only works while the element is being hovered on.
Hmm. I was under the impression that a link was "active" whenever it has the caret. That's why I thought changing the <div>s to <a>s might help. If I'm wrong about :active this way won't work at all, of course.
-
Using display: block is a perfectly legitimate method...
This is correct, and it's the method that Booker and I both used in the solutions we posted above.
I think Booker's way is best for anyone who isn't already including the jQuery library in their pages. I would probably use a <span> instead of a button, but that's more a matter of preference than functionality.
I'm not at all familiar with jQuery. Is there any reason not to use plain old JavaScript?
When you say, "plain old JavaScript," do you mean without CSS? Or do you only mean without jQuery?
jQuery is javascript. It's a javascript file with a lot of pre-written functions in it, which a lot of web developers use so we don't need to reinvent the wheel every time we want to do something that's already defined in that file. The method Booker posted doesn't use jQuery, but both of our methods do combine javascript with CSS. With or without jQuery, it's best to let CSS handle the things it can handle, and use javascript only when necessary. Here, javascript is necessary. I used it to toggle between adding and removing a class in a tag, and Booker used it to change the text on a button. From there, CSS targeted the thing we changed with javascript, and it's the CSS that styles, moves, displays or does whatever we want it to do when the element is in whatever state the javascript tells it to be in.
It won't. "active" is the element's state when the mouse button is held down on it, and it's no longer active when the mouse button is released. It doesn't matter what properties you define for the active state, it will still only work when it's in that state, the same way :hover only works while the element is being hovered on.
Hmm. I was under the impression that a link was "active" whenever it has the caret. That's why I thought changing the <div>s to <a>s might help. If I'm wrong about :active this way won't work at all, of course.
I don't know what you mean by "whenever it has the caret."
The standard set by w3c for the :active state is this (emphasis mine):
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
(source: w3.org (http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes))
This is why display:block quits working as soon as you release the mouse button, because the element is no longer active. As I said before, display:block was never the problem. The problem was relying on the :active pseudo-class.
If a browser isn't following the web standards that are set by the w3c, they're doing it wrong. Internet Explorer used to hold a link in its active state until it left the page, but that went against web standards, and IE seems to have corrected this behavior at some point.
I hope this clarifies what I was trying to explain. :)
-
Hmm. I was under the impression that a link was "active" whenever it has the caret. That's why I thought changing the <div>s to <a>s might help. If I'm wrong about :active this way won't work at all, of course.
I don't know what you mean by "whenever it has the caret."
Wrong word, sorry. The dotted outline that appears around each link in turn when you using the tab key to navigate around a page.
(It also used to appear when you click a link, before the new page loads. That doesn't seem to happen in Chromium, other browsers may vary.)
-
That isn't one of the things I've ever thought to test before, but browsers probably do vary on that. In Firefox, the only ways I can seem to make that dotted border appear is if I click on the link and then use the back button to go back again; or open a link in a different tab, go to a that tab or a different one, then go back to the tab where I clicked on the link.
-
Heh. I said I was out of practice.
Wrong pseudo-element: it very nearly works if you use :focus instead of :active:
<html>
<head>
<title>Collapsing Block</title>
<style>
a {color: black; text-decoration: none;}
.collapse .collapsecontent {display:none;}
.collapse:focus .collapsecontent {display:block; }
</style>
</head>
<body>
<a class="collapse" href="javascript: void(0);">
<p class="collapselabel">Click Me (1)</p>
<p class="collapsecontent">This is the content (1).</p>
</a>
<a class="collapse" href="javascript: void(0);">
<p class="collapselabel">Click Me (2)</p>
<p class="collapsecontent">This is the content (2).</p>
</a>
<a class="collapse" href="javascript: void(0);">
<p class="collapselabel">Click Me (3)</p>
<p class="collapsecontent">This is the content (3).</p>
</a>
</body>
</html>
The hidden block won't re-hide till you click somewhere else, but otherwise this works for me in Firefox, Opera and Konqueror. Doesn't work in Chromium unless I cheat and use the "inspect element" thing to toggle the :focus state. Konqueror uses the same rendering engine as Chromium so I don't know why they differ.
-
Maybe it doesn't like the invalid use of a block-level element inside an inline element.
Will it work in Chromium if you change it to this?
<!doctype html>
<html>
<head>
<title>Collapsing Block</title>
<style type="text/css">
a {color: black; text-decoration: none;}
.collapselabel { display: block; margin: 1em 0; }
.collapse .collapsecontent {display:none;}
.collapse:focus .collapsecontent {display:block; margin: 1em 0; }
</style>
</head>
<body>
<a class="collapse" href="javascript: void(0);">
<span class="collapselabel">Click Me (1)</span>
<span class="collapsecontent">This is the content (1).</span>
</a>
<a class="collapse" href="javascript: void(0);">
<span class="collapselabel">Click Me (2)</span>
<span class="collapsecontent">This is the content (2).</span>
</a>
<a class="collapse" href="javascript: void(0);">
<span class="collapselabel">Click Me (3)</span>
<span class="collapsecontent">This is the content (3).</span>
</a>
</body>
</html>
-
Makes no difference. I also modified the CSS rule for a to include display: block, but that also has no visible effect.
It's a mystery!
-
Not really. If it worked in any browser, then that browser would be doing it wrong.
The :focus selector is allowed on elements that accept keyboard events or other user inputs.
Source: w3schools (http://www.w3schools.com/cssref/sel_focus.asp)
This is why I used it to change colors in a textarea in one of my above examples, because :focus was created for form inputs and textareas.
-
Here's something you can do with <textarea>, :focus, and transitions. It can be a nifty effect for forms where people input data, but I wouldn't use it for spoilers because nobody would be able to add images, links, or other formatting to them.
<!doctype html>
<html>
<head>
<title>textarea color change and animated resize on focus</title>
<style type="text/css">
textarea {
border: 1px solid #ccc;
background: #eee;
color: #eee;
width: 300px;
height: 1.5em;
transition: height 1s, width 1s;
}
textarea:focus {
color: #000;
width: 500px;
height: 10em;
}
</style>
</head>
<body>
<p>Click in box below for spoiler:</p>
<textarea spellcheck="false">Click outside of this box to close it.
---------------------------------------
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a sagittis libero, vel blandit urna. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent pulvinar leo eu rhoncus mattis. Pellentesque congue feugiat vestibulum. Duis id ullamcorper metus. Etiam accumsan, ipsum eget imperdiet faucibus, purus nunc mattis neque, at tincidunt ipsum mauris eu lorem. Nullam pellentesque velit id enim adipiscing, eget elementum velit euismod. Sed at faucibus nunc, pulvinar pharetra neque. Cras dapibus massa sit amet metus sodales lacinia. Maecenas nec blandit nunc. Curabitur tempus elementum venenatis. Ut fermentum lacinia semper. Nam accumsan lectus eu dignissim facilisis.</textarea>
</body>
</html>
I put it here, so anyone can see it in action: http://jsfiddle.net/kPrtb/ (http://jsfiddle.net/kPrtb/)
-
This uses the jQuery function I posted initially, but I added styling and animation here: http://jsfiddle.net/hn6Kf/1/ (http://jsfiddle.net/hn6Kf/1/)
One thing I forgot to account for in my previous post and this one was multiple spoilers on the same page, so I updated the fiddle at the link and edited this post accordingly.
Notice how onclick="$(this).toggleClass('showme');" is the only javascript I added. I didn't need to define that function, because it's already defined in the jQuery file that anyone can download here (http://jquery.com/download/).
-
Not really. If it worked in any browser, then that browser would be doing it wrong.
The :focus selector is allowed on elements that accept keyboard events or other user inputs.
Source: w3schools (http://www.w3schools.com/cssref/sel_focus.asp)
This is why I used it to change colors in a textarea in one of my above examples, because :focus was created for form inputs and textareas.
That would explain why it doesn't work on <div>, but I'm using it in an <a>nchor tag which does accept keyboard input.
Your textarea is pretty cool. I will have to learn some of this new-fangled CSS3!
-
<a>nchor tags accept mouse input. It's true that you can tab to a link and click enter instead of using a mouse, but you can't actually enter data into a link like you can a text input or textarea.
CSS3 is great! You can make a whole site display one way on a laptop, another way on tablets, another way on smartphones, and have it change in front of your eyes by turning that tablet or smartphone from portrait to landscape... all with pure CSS. In fact, you can see this effect in your browser while resizing it. Try this simple demonstration.
<!doctype html>
<html>
<head>
<title>Responsive design demo</title>
<style type="text/css">
body { background: #f00; }
@media (max-width: 460px) {
body {
background: #009;
color: #fff;
}
}
@media (max-width: 460px) and (orientation: landscape) {
body {
background: #090;
color: #ff0;
}
}
</style>
</head>
<body>
<p>Wheeeeeeeeeeeeeeeee!!!!</p>
</body>
</html>
If you can upload it and view it with a smartphone, also turn that phone to view it in portrait and landscape. It's so nice that CSS is finally getting to be as powerful as it is, and when most browsers start supporting animated png, I hope IE won't take 5 years to catch up. :o
-
Cool.
The Wikipedia page for animated PNG has a table of software that supports it (or not). In the Web Browsers section, IE doesn't even get a "No".
(In fairness Chrome doesn't support it either without a plug-in.)
-
I must be looking at a different page than you are, because it says "No" for IE under browsers[20] and mobile here (http://en.wikipedia.org/wiki/APNG#cite_ref-20).
Having to use an .htc file in the past just to show regular png transparency in IE6, and now to do other now-standard things in IE8+ is bad enough, but we can't rely on the general public to install a plugin or decent browser just to see a site the way we want them to. When so many people don't know the difference between "Google" and "the internet", a lot of people won't know how to do that, and a lot of people who do know how won't want to bother with it, so I just wait for the day to come when all the browsers will support it natively, or at least have a good fall-back for browsers that can't handle something.
Another thing that annoys me is the fact that CSS3 columns (http://www.w3schools.com/css/css3_multiple_columns.asp) have been a standard for a few years, but Opera still doesn't support them, and while IE10 is finally supporting them, a lot of people are still running IE8 or even IE7. Then we have the issue of having to use -webkit- and -moz- prefixes for a lot of stuff. Why can't they just use the standard CSS, instead of forcing us to bloat our code to accommodate all these different browsers? :o
-
FYI, I was playing around with HTML and CSS tonight to try to figure out how to do something else (unrelated, for a different project, but what the hay, it's an html thread), and it's working out surprisingly well.
Basically, I'm trying to make a faux newspaper page using CSS and HTML. It's built out of a table, with a header image, columns of headlines and text, and a footer, with an off-white background. Pretty simple stuff, but for an html/css noob like me, it's an accomplishment.
-
It's always satisfying to get a layout looking the same in the browser as it does in your head, isn't it?
You're not really supposed to use tables for page layout, but for multiple columns that's always been a bit on an Achilles Heel for CSS. Or it always used to be: take a look at Neith's link for CSS3 columns, and particularly the first "try it yourself" link.
I'd also be a little wary of multi-column layouts - users won't like having to repeatedly scroll back up to the top of the page.
-
I'll echo what Dan said. Tables should only be used for tabular data, and never for layout.
Why tables for layout is stupid: problems defined, solutions offered (http://www.hotdesign.com/seybold/) - I think this was written before the first iPhones came out, but with so many people using smartphones and other mobile devices now, it's even more pertinent today.
Here's a good tutorial (http://net.tutsplus.com/tutorials/html-css-techniques/responsive-web-design-a-visual-guide/) that shows how easy it is to use CSS to detect and serve up the appropriate styling for different-sized devices.
-
I should clarify. I'm not trying to style a web page to look like a newspaper, but to create a faux newspaper page ON a web page. i.e. I want to give the impression that I placed a photo or scan without having to generate a unique image for each "scan."
ETA I want to use it as a narrative element in non-linear html fiction.
-
What was the table you mentioned? ???