One of the things I find ListML really handy for is planning a presentation/talk. I write up a hierarchical list of all the things I want to cover using ListML, then I can work from that list to build out my slides/demos/etc. For the recent WordCamp NYC, I needed to present 2 structured talks, so I went to work in ListML and knocked up 2 lists of things to cover. Once I was done with the talks, I realized that there was some good content in these lists that a) served as a bit of a transcript to the talks themselves, and b) in some cases wasn’t actually covered (for time reasons, or just because I forgot them).
I wanted to be able to post these lists to my site along with the presentations, but didn’t really want to post a whole separate page for each one just to put up a simple HTML list.
Using the output from my ListML script, I chopped out just the main OL…/OL portion and then dropped it into the HTML view within WordPress’ editor. I wrapped that in <div class=”collapse”>…</div> and then included some extra jQuery in my main scripts.js file:
// Anything classed with .collapse should be collapsed as well by default
jQuery( '.collapse' ).each(function(){
this.id = 'collapser-' + Math.floor( Math.random() * ( Math.random() * 10000 ) );
jQuery(this).wrap( '<div id="' + this.id + '-expand"></div>' );
jQuery(this).before( '<a id="' + this.id + '-link" href="#" onclick="javascript:jQuery(\'#' + this.id + '\').slideToggle();return false;">Click to show/hide...</a>' );
jQuery(this).wrap( '<div></div>' );
jQuery(this).slideUp();
});
and a couple of extra CSS rules to make it look a little better:
.collapse {
display: none;
}
.collapse-block {
margin: 1em 0;
}
and there we go. You can see the result in my WordCamp NYC Round Up post, where there are links below each video/slideshow that’s embedded. Those notes are all inline within the page, but stay out of your way unless you want to see them. In the future all I need to do is wrap a block of content in <div class=”collapse”>…</div> and it will be automagically handled for me with no extra hassles 🙂
Here’s another example, just so you can see it in action right here
nice toutorial, bu i had a question. can i place the jquery script in my header or do i have to create then add it to the scripts.js file:
thanks in advance..
Yep, you should definitely be able to just drop this script into your
header or footer if you prefer (or if you're not already loading an
external JS file). Just make sure that you're loading jQuery as well,
and it should work just the same.
Unfortunately if someone has js disabled, the collapsed content stays collapsed. Is there a workaround?
You can also default the CSS to be display:block, and make the jQuery
slideUp the content once the page is loaded. The unfortunate
side-effect of that is that even if you have JS enabled, you're likely
to see the content, and then have it slideUp immediately once the page
is loaded.
For those of us who can copy/paste (Years of hard practice!) but not code, would you show how to do the "onload" thing? Maybe add it to the post in a new "To make sure folk with JS disabled see the contents" section?
TIA
Thanks for the reply Beau.
The only other problem I am having with this code is that there is a bad flicker effect when I click the toggle to expand content. I am using the code here:
http://wolfdogrescue.net/wp/category/adoptables/
The js is loaded in the footer rather than the header, so maybe this is having some effect. I will experiment later and report back.
I've seen that flash before, but have never pinned down exactly what
causes it. I believe it's related to CSS padding/margins on the
element being exposed, but as I said, I've never pinned it down. If
you try tinkering around with them you can hopefully get rid of it.
I fixed the flickering problem on accident today. I had span tags around my content to call in the class "collapse" instead of divs. After switching the span tags to divs, the flickering went away.