GithubHelp home page GithubHelp logo

isabella232 / sphinx-togglebutton Goto Github PK

View Code? Open in Web Editor NEW

This project forked from executablebooks/sphinx-togglebutton

0.0 0.0 0.0 783 KB

Show and hide content with a button in Sphinx

Home Page: https://sphinx-togglebutton.readthedocs.io/en/latest/

License: MIT License

Python 27.92% JavaScript 47.46% CSS 24.62%

sphinx-togglebutton's Introduction

sphinx-togglebutton

A small sphinx extension to make it possible to add a "toggle button" to sections of your page. This allows you to:

  • Collapse Sphinx admonitions (notes, warnings, etc) so that their content is hidden until users click a toggle button.
  • Collapse arbitrary chunks of content on your page with a collapse directive.

Demonstration of Sphinx Togglebutton

Installation

You can install sphinx-togglebutton with pip:

pip install sphinx-togglebutton

Usage

In your conf.py configuration file, add sphinx_togglebutton to your extensions list.

E.g.:

extensions = [
    ...
    'sphinx_togglebutton'
    ...
]

Now, whenever you wish for an admonition to be toggle-able, add the :class: dropdown parameter to the admonition directive that you use.

For example, this code would create a toggle-able "note" admonition that starts hidden:

.. note::
    :class: dropdown

    This is my note.

Clicking on the toggle button will toggle the item's visibility.

You may also show the content by default. To do so, add the dropdown class as well as a toggle-shown class, like so:

.. note::
    :class: dropdown, toggle-shown

    This is my note.

You can also use containers to add arbitrary toggle-able code. For example, here's a container with an image inside:

.. container:: toggle, toggle-hidden

    .. admonition:: Look at that, an image!

        .. image:: https://media.giphy.com/media/mW05nwEyXLP0Y/giphy.gif

sphinx-togglebutton's People

Contributors

choldgraf avatar mgeier avatar rkdarst avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.