Dropdown with hypelink in title that displays contents on click

Question

I'm looking a way to display the text to appear down from a hyperlink. In the current page I need to include links to different pages, website links, link to text to same page once the link is clicked it will expand down.

I'm able to achieve the same using below code using sphinx-panels.

* `Web Interface <https://example.com>`__
.. dropdown:: * Software Stack

 Line1 
 Line2 
 .. code:: bash
    $ some commands  

Here I'm actually looking the hyperlink should be in same format. But in my code, you can the second one is a dropdown link. This looks my overall looks of that page is not perfect.

Answer 1

Using the sphinx-design extension this can be achieved by writing the hyperlink directly into the directive argument, in your example if you write:

.. dropdown:: `Web Interface <https://example.com>`__

    *Software Stack*

    Line1 
    Line2 

    .. code-block:: bash

        $ some commands  

You get a dropdown with a clickable hyperlink in the title that expands and collapses the dropdown (usually directives don't allow hyperlinks in the argument but .. dropdown:: supports it). Any further styling would have to be done using custom CSS and setting one of the class properties on the directive.