Staredit Network > Forums > Technology & Computers > Topic: Collapse Boxes
Collapse Boxes
Feb 6 2013, 11:40 am
By: Jack  

Feb 6 2013, 11:40 am Jack Post #1

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

Feb 6 2013, 3:45 pm Biophysicist Post #2



In your <head> tag, add the following:

Code
<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:
Code
<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.

Feb 6 2013, 8:32 pm Dem0n Post #3

ᕕ( ᐛ )ᕗ

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.



Memes gather, and now my watch begins. It shall not end until my death. I shall take no wife, hold no lands, father no children. I shall wear no crowns and win no glory. I shall live and die at my post. I am the sword in the darkness. I am the memer on the walls. I am the shield that guards the realms of memes. I pledge my life and honor to the Meme's Watch, for this meme and all the memes to come.

Feb 6 2013, 9:36 pm Jack Post #4

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

Feb 7 2013, 10:16 pm ShadowFlare Post #5



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.

Feb 8 2013, 12:38 am Roy Post #6

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:

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

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




Options
  Back to forum
Please log in to reply to this topic or to report it.
Members in this topic: None.
[08:59 am]
Corbo -- cause we mainly use discord now
[08:14 am]
Generalpie -- Why doesn't the shoutbox get used as much as it used to anyways?
[08:13 am]
Generalpie -- rekt
[07:59 am]
TF- -- 👊
[02:05 am]
KrayZee -- Vrael
Vrael shouted: depends on what we're talking, 2012 dark knight rises obviously Anne Hathaway/selina kyle, but if we're going 90's The Animated Series Talia all the way
I'm talking about the one you're married to, is it Hathaway or Pfeiffer catwoman?
[09:27 pm]
TF- -- xe
[08:09 pm]
Wing Zero -- I miss when it was named the global maths and rektbox
[06:05 pm]
Roy -- :roy:
[05:22 pm]
Vrael -- none of us do
[05:22 pm]
Vrael -- well I guess that's true, I don't spam in the spambox nearly as often anymore
Please log in to shout.


Members Online: Roy, ryleegfigueroa, weberdos