Content tabs

.. content-tabs:: class


.. container:: content-tabs class

“content-tabs” directive creates a block with content tabs. Content of only one tab will be shown at the same time. Content switches with click on corresponding tab’s caption. Click on caption of tab-container’s caption with the same name attribute activates all tabs with the same name in all content-tab blocks with the same attribute class.

Special class right-col fixates the “content-tabs” menu in the upper right position, see All-in-One Example.

.. tab-container:: name

“tab-container” directive creates a content tab. Tab’s caption is set by title option. To switch tabs synchronously the name attribute should match with “tab-container” from another blocks.

Full example:

.. content-tabs::

    .. tab-container:: tab1
        :title: Tab title one

        Content for tab one

    .. tab-container:: tab2
        :title: Tab title two

        Content for tab two

will be rendered like this:

Tab title one

Content for tab one

Tab title two

Content for tab two

Generated HTML code:

<div class="content-tabs docutils container">
    <ul class="contenttab-selector">
        <li class="tab-tab1 selected">Tab title one</li>
        <li class="tab-tab2">Tab title two</li>
    <div class="tab-content docutils container contenttab" id="tab-tab1">
        <p>Content for tab one</p>
    <div class="tab-content docutils container contenttab" id="tab-tab2" style="display: none;">
        <p>Content for tab two</p>

More examples




Example request

import my_api
my_api.signin('username', 'password')




Example request

include 'my-api.php';
MyApi::signin('username', 'password');