Sphinx and accordion list with CSS

Question

I try to implement accordion list of headers of functions in Sphinx template. Now every functions are described on one page without the ability of hiding some of them. I think it would be very convenient feature.

I'm using template "bootstrap" (but in is doesn't matter i think). I override the file "layout.html". In this file I can override standart blocks (wich describes here: http://sphinx-doc.org/templating.html#blocks ). Every description of my functions (documentation from .py files) is located in sections. But I don't understand how can I apply my own .css style to the sections. Help me please..

Or maybe it could be done easier using JavaScript?

I'd like to do something like this http://tympanus.net/codrops/2012/02/21/accordion-with-css3/

Answer 1

I've found the way with JQuery and CSS.

We need to add one CSS file and extend layout.html. I override the block "extrahead"

First you need to put layout.html into "_templates" directory and accordion.css into "_static". Read more here http://ryan-roemer.github.io/sphinx-bootstrap-theme/README.html#extending-layout-html

accordion.css:

h3{
    cursor: pointer;
    padding: 10px 10px;
}
h1{
    text-align: center;
}
dl.function{
    display: none;
} 

layout.html:

{# Import the theme's layout. #}
{% extends "!layout.html" %}

{# Custom CSS overrides #}
{% set css_files = css_files + ["_static/accordion.css"] %}

{% block extrahead %}

<script type="text/javascript">
        $(document).ready(function(){   
            $('h3').click(function(){   
                $(this).toggleClass('active');      
                $(this).next('dl').slideToggle(1);  
            });
        });
        $(document).ready(function(){   
            $('dl.post').each(function() {
                $(this).parents('div.section:first').find('h3').css({'background':'#10A54A', 'color':'white', 'font-weight':'normal'});
            });
        });
        $(document).ready(function(){   
            $('dl.put').each(function() {
                $(this).parents('div.section:first').find('h3').css({'background':'#C5862B', 'color':'white', 'font-weight':'normal'});
            });
        });
        $(document).ready(function(){   
            $('dl.delete').each(function() {
                $(this).parents('div.section:first').find('h3').css({'background':'#A41E22', 'color':'white', 'font-weight':'normal'});
            });
        });
        $(document).ready(function(){   
            $('dl.get').each(function() {
                $(this).parents('div.section:first').find('h3').css({'background':'#0F6AB4', 'color':'white', 'font-weight':'normal'});
            });
        });
        $(document).ready(function(){   
            $('dl.any').each(function() {
                $(this).parents('div.section:first').find('h3').css({'background':'gray', 'color':'white', 'font-weight':'normal'});
            });
        });

        $(document).ready(function(){   
            $('h2').css('font-weight', '600');
        });
</script>

{{ super() }}
{% endblock %}

An example:

https://i.stack.imgur.com/Ayj1S.png