sphinx documentation: collapse content

Sometimes, the list of entries on a single page gets very long. For quick navigation, you may either add a table of contents or collapse all content. In order to do so, add the following line to your layout.html template:

{% set script_files = script_files + [pathto("_static/collapse.js", 1)] %}

Now the referenced JavaScript file is missing. You have to add it to your _static folder; sphinx will automatically copy the file to the appropriate destination. The following code will expand a section when you click on the title or in case a anchor is defined in the URL as this is the way sphinx creates permalinks.

function collapse_dd(){
        if ($(this).hasClass('collapsed')) {
            $(this).removeClass('collapsed')
            $(this).children('dd').show('fast')
        } else {
            $(this).addClass('collapsed')
            $(this).children('dd').hide('fast')
        }
        return false;
    }
$(document).ready(function() {
    $('dl.class > dd').hide()
    $('dl.class').addClass('collapsed').click(collapse_dd)
    $('dl.method > dd').hide()
    $('dl.method').addClass('collapsed').click(collapse_dd)
    $('div.section > dl.function > dd').hide()
    $('div.section > dl.function').addClass('collapsed').click(collapse_dd)

    $('a').click(function(e) {
        e.stopPropagation();
    })

    if (window.location.hash.length != 0) {
        base = window.location.hash.replace(/\./g, '\\.');
        base = $(base);
        base.removeClass('collapsed');
        base.parents('dd').show();
        base.parents('dl').removeClass('collapsed');
        base.siblings('dd').show();
    }
});