>be faceless void >mfw I have no face
Hi everyone,
I'm currently working on a website and would like to know a better way to do collapse boxes than the way I am currently. As far as I can see, the way SEN's collapse boxes work is that every time the BBcode parser finds [Collapse], it generates a new col_12312312523523 or similiar, so that each collapse box is uniquely identified.
Basically I'd like to have a look at exactly how SEN does it, or else some advice on how to do it from others who have. I know how to make a collapse box, but it's the unique identifiers and how the page knows which ones are which from just the BBCode parsing that I'd like help on.
Red classic.
"In short, their absurdities are so extreme that it is painful even to quote them."
In your <head> tag, add the following:
<script type="text/javascript">
function toggleBox(button) {
var cbox = button.parentNode.getElementsByTagName("div")[0];
if(cbox.style.display == "block")
cbox.style.display = "none";
else
cbox.style.display = "block";
}
</script>
Now, for your BBCode, you'll want the following structure:
<div class="cbox">
<input type="button" onclick="toggleBox(this);" value="Toggle Collapse Box" />
<div style="display:none;">blah blah contents go here blah</div>
</div>
Untested, but I'm confident it'll work.
EDIT: If you're using someone else's forum software and can't easily modify the <head> tag, which is sometimes the case, then you can do the JS inline if needed. But that's dumb.
None.
You should make it so that clicking anywhere on the box opens it, instead of having to click to on a small button in the corner.
>be faceless void >mfw I have no face
Bio, thanks very much for your help!
Dem0n, yeah I can do that, good idea.
Red classic.
"In short, their absurdities are so extreme that it is painful even to quote them."
I seem to recall seeing the source for a page that used CSS to apply the onclick handler so you would only need to assign the class to the HTML element. I don't remember exactly what it looked like, though.
None.
An artist's depiction of an Extended Unit Death
CSS is supposed to be for styling and layout, not behavior. I did a quick search for CSS click events and I only really saw clever little hacks than a native implementation: it seems more academic than practical.
On that note, you shouldn't couple your HTML to your JavaScript; the HTML shouldn't know about it. The only real criticism I have for Bio's approach is that he's calling the JS method from the HTML (which is a common practice, but not a good one, in my opinion). Here's how I would change it:
<script type="text/javascript">
$.(
$('.cbox').on('click', '.cbox-header', function(e) {
if($(e.target).is('span')) {
return false; // Ignore clicks on span text
}
$(this).parent().children('.cbox-content').toggle();
});
);
</script>
I used jQuery, by the way. I would recommend it.
<div class="cbox">
<div class="cbox-header">
<span>Collapse Box</span>
<button>+</button>
</div>
<div class="cbox-content" style="display:none;">blah blah contents go here blah</div>
</div>
Changed the input button to just a regular button. Otherwise, basically the exact same idea.
See
this JsFiddle for a sample implementation of the above (I stole basically all of the CSS styling from Sen). I even made it expand when you click anywhere on the header (except the span text) like Demon suggested.
Edit: Made it better.
Post has been edited 8 time(s), last time on Feb 8 2013, 2:53 am by Roy.
