Show/hide part of text (question/answer) in sphinx file

喜你入骨 提交于 2021-02-11 13:38:15

问题


I was wondering if there is a method to add a directive to a sphinx document with a hidden section that can be opened with a click.

Basically something like you can find https://realpython.com/pandas-python-explore-dataset/ (search for Show/Hide):


回答1:


Here is a working example from the Mastering Plone Training documentation.

And here's the source code.

..  admonition:: Solution
    :class: toggle
    * Go to the dexterity-controlpanel (http://localhost:8080/Plone/@@dexterity-types)
    * Click on *Page* (http://127.0.0.1:8080/Plone/dexterity-types/Document)
    * Select the tab *Behaviors* (http://127.0.0.1:8080/Plone/dexterity-types/Document/@@behaviors)
    * Check the box next to *Lead Image* and save.

The commit history shows that a custom JavaScript and style were added to the theme.

_static/custom.css

.toggle {
    background: none repeat scroll 0 0 #e7f2fa;
}

.toggle .admonition-title {
    display: block;
    clear: both;
}

.toggle .admonition-title:after {
    content: " ▼";
}

.toggle .admonition-title.open:after {
    content: " ▲";
}

_templates/page.html

{% set css_files = css_files + ["_static/custom.css"] %}

{%- block extrahead %}
 <script type="text/javascript">
    $(document).ready(function() {
        //
        //
        $(".toggle > *").hide();
        $(".toggle .admonition-title").show();
        $(".toggle .admonition-title").click(function() {
            $(this).parent().children().not(".admonition-title").toggle(400);
            $(this).parent().children(".admonition-title").toggleClass("open");
        })
    });
</script>
{% endblock %}


来源:https://stackoverflow.com/questions/59679797/show-hide-part-of-text-question-answer-in-sphinx-file

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!