geek

I recently implemented the Bugzilla Reports extension at work for MediaWiki. We use MediaWiki to outline release notes and other documentation, and we include in those notes a list of related bugs that were resolved and closed. With so much manual work to write out the bugs and link to them, it made more sense to include this extension so displaying those bugs is just a simple query. But what I also noticed is that our list of bugs can be quite long depending on the size and nature of the release notes. It would be great if we could hide sections so in the event the bugs section was too huge, you can easily hide/show it. Enter jQuery!

I won’t go into the specifics of setting up jQuery on MediaWiki, but you can find a decent summary of the steps here. Once you have that working, you’ll need to do the following:

• For the skin you are using, edit the /<path to mediawiki install>/skins/<skin name>.php file
• After the </body> tag and after your script tags for including jQuery, add the following:

<script>
    $(":header>span.mw-headline").click( function() {
        var $start = $(":header").index($(this).parent());
        var $end   = $start + 1;
        $(":header").eq($start).toggleClass("highlight");
        $(":header").eq($start).nextAll().not(":header").toggle();
        $(":header").eq($end).nextAll().not(":header").toggle();
    });
</script>

And that’s it! The reason we look for the span with a class of “mw-headline” is because of the “Edit” section buttons. If we look for just the header, you’ll wind up catching the Edit button and if you try to click the Edit link you’ll actually toggle the section instead. This is also why we we get the index of $(this).parent(). Since we clicked on an element inside the header, we don’t want to use the index of that element otherwise it won’t toggle everything correctly.

Props to Andi for some example code. Made it easy to tweak it a little to get the Edit button working again.

CarolinaCon starts tomorrow evening. If you happen to be around the Raleigh area, I highly recommend coming and enjoying some of the talks that are lined up. You can’t beat three days of great talks, networking, and rocking out for $20. As I did last year, I’m still tweaking my talk. It’s ready to rock as is, but I tend to fuss over this type of stuff and I want to make sure I include as much information as I can without going over my time slot, and making time for questions during/after the talk.

After my talk is done, I’ll be posting the presentation for anyone to download if they can’t make it. If you do get a chance to go, find me and say hi!