Hiding Sections In MediaWiki

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 ** //skins/.php** file
    • After the </body> tag and after your script tags for including jQuery, add the following: </ul>
        <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>
      
1
2
3
    And that&#8217;s it! The reason we look for the span with a class of &#8220;mw-headline&#8221; is because of the &#8220;Edit&#8221; section buttons. If we look for just the header, you&#8217;ll wind up catching the Edit button and if you try to click the Edit link you&#8217;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&#8217;t want to use the index of that element otherwise it won&#8217;t toggle everything correctly. 
    
    Props to <a href="http://www.mail-archive.com/jquery-en@googlegroups.com/msg40033.html" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'http://www.mail-archive.com/jquery-en@googlegroups.com/msg40033.html', 'Andi']);" >Andi</a> for some example code. Made it easy to tweak it a little to get the Edit button working again.

Determining the Right CND Tool for a Job

Throughout the day a SOC team uses dozens of tools to complete tasks in a few minutes that would normally take much longer. Tools improve...… Continue reading

CRITs Authentication

Published on June 24, 2014

CRITs: Collaborative Research Into Threats

Published on June 18, 2014