Use sphinx-design dropdown instead of custom CSS/JS

13 files changed, 183 insertions, 108 deletions

diff --git a/docs/_static/collapsible_container.css b/docs/_static/collapsible_container.css
deleted file mode 100644
index bcad629..0000000
--- a/docs/_static/collapsible_container.css
+++ /dev/null
@@ -1,26 +0,0 @@
-/* Taken from: https://github.com/plone/training/blob/master/_static/custom.css */
-
-.toggle {
-    /* background: none repeat scroll 0 0 #e7f2fa; */
-    padding: 12px;
-    line-height: 24px;
-    margin-bottom: 24px;
-}
-
-.toggle .admonition-title {
-    display: block;
-    clear: both;
-    cursor: pointer;
-}
-
-.toggle .admonition-title:after {
-    content: " ▶";
-}
-
-.toggle .admonition-title.open:after {
-    content: " ▼";
-}
-
-.toggle p:last-child {
-    margin-bottom: 0;
-}
diff --git a/docs/_static/collapsible_container.js b/docs/_static/collapsible_container.js
deleted file mode 100644
index 75042d6..0000000
--- a/docs/_static/collapsible_container.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// Taken from: https://github.com/plone/training/blob/master/_templates/page.html
-
-$(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");
-    })
-});
diff --git a/docs/conf.py b/docs/conf.py
index 5162e87..a5dfadb 100644
--- a/docs/conf.py
+++ b/docs/conf.py
@@ -119,9 +119,7 @@ apidoc_toc_file = False
 
 # HTML general settings
 html_favicon = join('_static', 'favicon.ico')
-html_js_files = ['collapsible_container.js']
 html_css_files = [
-    'collapsible_container.css',
     'table.css',
     'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css',
 ]
diff --git a/docs/examples.md b/docs/examples.md
index e1c3c4d..fdf593c 100644
--- a/docs/examples.md
+++ b/docs/examples.md
@@ -28,8 +28,12 @@ The following scripts can also be found in the
 :end-line: 4
 ```
 
-:::{admonition} Example: [basic_sessions.py](https://github.com/requests-cache/requests-cache/blob/main/examples/basic_sessions.py)
-:class: toggle
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
+[basic_sessions.py](https://github.com/requests-cache/requests-cache/blob/main/examples/basic_sessions.py)
 ```{literalinclude} ../examples/basic_sessions.py
 :lines: 6-
 ```
@@ -41,8 +45,12 @@ The following scripts can also be found in the
 :end-line: 4
 ```
 
-:::{admonition} Example: [basic_patching.py](https://github.com/requests-cache/requests-cache/blob/main/examples/basic_patching.py)
-:class: toggle
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
+[basic_patching.py](https://github.com/requests-cache/requests-cache/blob/main/examples/basic_patching.py)
 ```{literalinclude} ../examples/basic_patching.py
 :lines: 6-
 ```
@@ -54,8 +62,12 @@ The following scripts can also be found in the
 :end-line: 3
 ```
 
-:::{admonition} Example: [expiration.py](https://github.com/requests-cache/requests-cache/blob/main/examples/expiration.py)
-:class: toggle
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
+[expiration.py](https://github.com/requests-cache/requests-cache/blob/main/examples/expiration.py)
 ```{literalinclude} ../examples/expiration.py
 :lines: 5-
 ```
@@ -67,8 +79,12 @@ The following scripts can also be found in the
 :end-line: 4
 ```
 
-:::{admonition} Example: [url_patterns.py](https://github.com/requests-cache/requests-cache/blob/main/examples/url_patterns.py)
-:class: toggle
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
+[url_patterns.py](https://github.com/requests-cache/requests-cache/blob/main/examples/url_patterns.py)
 ```{literalinclude} ../examples/url_patterns.py
 :lines: 6-
 ```
@@ -80,8 +96,12 @@ The following scripts can also be found in the
 :end-line: 25
 ```
 
-:::{admonition} Example: [pygithub.py](https://github.com/requests-cache/requests-cache/blob/main/examples/pygithub.py)
-:class: toggle
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
+[pygithub.py](https://github.com/requests-cache/requests-cache/blob/main/examples/pygithub.py)
 ```{literalinclude} ../examples/pygithub.py
 :lines: 27-
 ```
@@ -93,8 +113,12 @@ The following scripts can also be found in the
 :end-line: 4
 ```
 
-:::{admonition} Example: [threads.py](https://github.com/requests-cache/requests-cache/blob/main/examples/threads.py)
-:class: toggle
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
+[threads.py](https://github.com/requests-cache/requests-cache/blob/main/examples/threads.py)
 ```{literalinclude} ../examples/threads.py
 :lines: 6-
 ```
@@ -106,8 +130,12 @@ The following scripts can also be found in the
 :end-line: 3
 ```
 
-:::{admonition} Example: [log_requests.py](https://github.com/requests-cache/requests-cache/blob/main/examples/log_requests.py)
-:class: toggle
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
+[log_requests.py](https://github.com/requests-cache/requests-cache/blob/main/examples/log_requests.py)
 ```{literalinclude} ../examples/log_requests.py
 :lines: 5-
 ```
@@ -119,8 +147,12 @@ The following scripts can also be found in the
 :end-line: 8
 ```
 
-:::{admonition} Example: [external_config.py](https://github.com/requests-cache/requests-cache/blob/main/examples/external_config.py)
-:class: toggle
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
+[external_config.py](https://github.com/requests-cache/requests-cache/blob/main/examples/external_config.py)
 ```{literalinclude} ../examples/external_config.py
 :lines: 10-
 ```
@@ -132,8 +164,12 @@ The following scripts can also be found in the
 :end-line: 8
 ```
 
-:::{admonition} Example: [benchmark.py](https://github.com/requests-cache/requests-cache/blob/main/examples/benchmark.py)
-:class: toggle
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
+[benchmark.py](https://github.com/requests-cache/requests-cache/blob/main/examples/benchmark.py)
 ```{literalinclude} ../examples/benchmark.py
 :lines: 10-
 ```
@@ -145,8 +181,12 @@ The following scripts can also be found in the
 :end-line: 4
 ```
 
-:::{admonition} Example: [convert_cache.py](https://github.com/requests-cache/requests-cache/blob/main/examples/convert_cache.py)
-:class: toggle
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
+[convert_cache.py](https://github.com/requests-cache/requests-cache/blob/main/examples/convert_cache.py)
 ```{literalinclude} ../examples/convert_cache.py
 :lines: 6-
 ```
@@ -159,8 +199,12 @@ The following scripts can also be found in the
 :end-line: 15
 ```
 
-:::{admonition} Example: [custom_request_matcher.py](https://github.com/requests-cache/requests-cache/blob/main/examples/custom_request_matcher.py)
-:class: toggle
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
+[custom_request_matcher.py](https://github.com/requests-cache/requests-cache/blob/main/examples/custom_request_matcher.py)
 ```{literalinclude} ../examples/custom_request_matcher.py
 :lines: 17-
 ```
@@ -173,8 +217,12 @@ The following scripts can also be found in the
 :end-line: 4
 ```
 
-:::{admonition} Example: [time_machine_backtesting.py](https://github.com/requests-cache/requests-cache/blob/main/examples/time_machine_backtesting.py)
-:class: toggle
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
+[time_machine_backtesting.py](https://github.com/requests-cache/requests-cache/blob/main/examples/time_machine_backtesting.py)
 ```{literalinclude} ../examples/time_machine_backtesting.py
 :lines: 6-
 ```
@@ -187,8 +235,12 @@ The following scripts can also be found in the
 :end-line: 5
 ```
 
-:::{admonition} Example: [vcr.py](https://github.com/requests-cache/requests-cache/blob/main/examples/vcr.py)
-:class: toggle
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
+[vcr.py](https://github.com/requests-cache/requests-cache/blob/main/examples/vcr.py)
 ```{literalinclude} ../examples/vcr.py
 :lines: 7-
 ```
diff --git a/docs/index.md b/docs/index.md
index f6e7e85..8a3e9c3 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -3,8 +3,11 @@ Pre-release warning to reduce confusion on what '/latest' means;
 TODO: add script to make this conditional
 -->
 <!--
-  ```{admonition} Note
-  :class: warning
+  :::{dropdown} Note
+  :animate: fade-in-slide-down
+  :color: primary
+  :icon: alert
+
   You are viewing the pre-release documentation, which may describe features that are still in development.
   Documentation for the latest stable release can be found at [requests-cache.readthedocs.io](https://requests-cache.readthedocs.io)
   ```
diff --git a/docs/user_guide/advanced_requests.md b/docs/user_guide/advanced_requests.md
index ac9e204..2a3c185 100644
--- a/docs/user_guide/advanced_requests.md
+++ b/docs/user_guide/advanced_requests.md
@@ -8,8 +8,11 @@ Requests has an [event hook](https://requests.readthedocs.io/en/master/user/adva
 system that can be used to add custom behavior into different parts of the request process.
 It can be used, for example, for request throttling:
 
-:::{admonition} Example code
-:class: toggle
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
 ```python
 >>> import time
 >>> import requests
@@ -38,8 +41,11 @@ can use the same code to iterate over both cached and non-cached requests. Cache
 will have already been read (i.e., consumed), but will be available for re-reading so it behaves like
 the original streamed response:
 
-:::{admonition} Example code
-:class: toggle
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
 ```python
 >>> from requests_cache import CachedSession
 
diff --git a/docs/user_guide/backends.md b/docs/user_guide/backends.md
index 7f85fa7..8238665 100644
--- a/docs/user_guide/backends.md
+++ b/docs/user_guide/backends.md
@@ -117,8 +117,11 @@ Or, using backend classes directly:
 ## Custom Backends
 If the built-in backends don't suit your needs, you can create your own by making subclasses of {py:class}`.BaseCache` and {py:class}`.BaseStorage`:
 
-:::{admonition} Example code
-:class: toggle
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
 ```python
 >>> from requests_cache import CachedSession
 >>> from requests_cache.backends import BaseCache, BaseStorage
diff --git a/docs/user_guide/backends/dynamodb.md b/docs/user_guide/backends/dynamodb.md
index ee06aca..7761903 100644
--- a/docs/user_guide/backends/dynamodb.md
+++ b/docs/user_guide/backends/dynamodb.md
@@ -42,15 +42,21 @@ documents. Response data can then be easily viewed via the
 [AWS Console](https://aws.amazon.com/console/).
 
 Here is an example of responses listed under **DynamoDB > Tables > Explore Items:**
-:::{admonition} Screenshot
-:class: toggle
+:::{dropdown} Screenshot
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-media
+
 ```{image} ../../_static/dynamodb_items.png
 ```
 :::
 
 And here is an example response:
-:::{admonition} Screenshot
-:class: toggle
+:::{dropdown} Screenshot
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-media
+
 ```{image} ../../_static/dynamodb_response.png
 ```
 :::
@@ -96,8 +102,12 @@ Here are the details you will need:
   - Range key (aka sort key): `key`
 
 ### Example CloudFormation Template
-:::{admonition} Example: [cloudformation.yml](https://github.com/requests-cache/requests-cache/blob/main/examples/cloudformation.yml)
-:class: toggle
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
+[cloudformation.yml](https://github.com/requests-cache/requests-cache/blob/main/examples/cloudformation.yml)
 ```{literalinclude} ../../../examples/cloudformation.yml
 :language: yaml
 ```
diff --git a/docs/user_guide/backends/mongodb.md b/docs/user_guide/backends/mongodb.md
index 4b504cc..3561f01 100644
--- a/docs/user_guide/backends/mongodb.md
+++ b/docs/user_guide/backends/mongodb.md
@@ -41,8 +41,10 @@ Response data can be easily viewed via the
 Here is an example response viewed in
 [MongoDB for VSCode](https://code.visualstudio.com/docs/azure/mongodb):
 
-:::{admonition} Screenshot
-:class: toggle
+:::{dropdown} Screenshot
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-media
 ```{image} ../../_static/mongodb_vscode.png
 ```
 :::
diff --git a/docs/user_guide/compatibility.md b/docs/user_guide/compatibility.md
index 12f2203..c7284fb 100644
--- a/docs/user_guide/compatibility.md
+++ b/docs/user_guide/compatibility.md
@@ -117,8 +117,11 @@ For example, if you are using {py:func}`.install_cache` in your application and
 requests-mock [pytest fixture](https://requests-mock.readthedocs.io/en/latest/pytest.html) in your
 tests, you could wrap it in another fixture that uses {py:func}`.uninstall_cache` or
 {py:func}`.disabled`:
-:::{admonition} Example: test_requests_mock_disable_cache.py
-:class: toggle
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
 ```{literalinclude} ../../tests/compat/test_requests_mock_disable_cache.py
 ```
 :::
@@ -141,8 +144,12 @@ Or if you use a `CachedSession` object, you could replace it with a regular `Ses
 If you want both caching and mocking features at the same time, you can attach requests-mock's
 [adapter](https://requests-mock.readthedocs.io/en/latest/adapter.html) to a `CachedSession`:
 
-:::{admonition} Example: `test_requests_mock_combine_cache.py`
-:class: toggle
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
+`test_requests_mock_combine_cache.py`
 ```{literalinclude} ../../tests/compat/test_requests_mock_combine_cache.py
 ```
 :::
@@ -157,8 +164,12 @@ This has the advantage of only using request-mock's behavior for
 ```
 
 To turn that into a complete example:
-:::{admonition} Example: `test_requests_mock_load_cache.py`
-:class: toggle
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
+`test_requests_mock_load_cache.py`
 ```{literalinclude} ../../tests/compat/test_requests_mock_load_cache.py
 ```
 :::
@@ -167,8 +178,12 @@ To turn that into a complete example:
 Usage with the [responses](https://github.com/getsentry/responses) library is similar to the
 requests-mock examples above.
 
-:::{admonition} Example: `test_responses_load_cache.py`
-:class: toggle
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
+`test_responses_load_cache.py`
 ```{literalinclude} ../../tests/compat/test_responses_load_cache.py
 ```
 :::
@@ -177,8 +192,13 @@ requests-mock examples above.
 If you would like to reuse your cached response data for unit tests, one option is to convert your
 cache into a format compatible with VCR-vased libraries like
 [vcrpy](https://github.com/kevin1024/vcrpy) and [betamax](https://github.com/betamaxpy/betamax).
-:::{admonition} Example: `vcr.py`
-:class: toggle
+
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
+`vcr.py`
 ```{literalinclude} ../../examples/vcr.py
 :lines: 7-
 ```
diff --git a/docs/user_guide/filtering.md b/docs/user_guide/filtering.md
index 885b991..e7a5c06 100644
--- a/docs/user_guide/filtering.md
+++ b/docs/user_guide/filtering.md
@@ -58,8 +58,6 @@ function via the `filter_fn` param. This can by any function that takes a
 should be cached. It will be applied to both new responses (on write) and previously cached
 responses (on read):
 
-:::{admonition} Example code
-:class: toggle
 ```python
 >>> from sys import getsizeof
 >>> from requests_cache import CachedSession
@@ -70,7 +68,6 @@ responses (on read):
 
 >>> session = CachedSession(filter_fn=filter_by_size)
 ```
-:::
 
 ```{note}
 `filter_fn()` will be used **in addition to** other filtering options.
diff --git a/docs/user_guide/inspection.md b/docs/user_guide/inspection.md
index cc7bb39..98db7e6 100644
--- a/docs/user_guide/inspection.md
+++ b/docs/user_guide/inspection.md
@@ -13,9 +13,11 @@ The following attributes are available on responses:
   {ref}`expiration` for details)
 - `is_expired`: indicates if the cached response is expired (if, for example, an old response was returned due to a request error)
 
-Examples:
-:::{admonition} Example code
-:class: toggle
+:::{dropdown} Examples
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
 ```python
 >>> from requests_cache import CachedSession
 >>> session = CachedSession(expire_after=timedelta(days=1))
diff --git a/docs/user_guide/serializers.md b/docs/user_guide/serializers.md
index 77980b0..bbc85f3 100644
--- a/docs/user_guide/serializers.md
+++ b/docs/user_guide/serializers.md
@@ -26,14 +26,20 @@ Usage:
 >>> session = CachedSession('my_cache', serializer='json')
 ```
 
-:::{admonition} Example JSON-serialized Response (with decoded JSON content)
-:class: toggle
+:::{dropdown} Example JSON-serialized Response (with decoded JSON content)
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
 ```{literalinclude} ../sample_data/sample_response_json.json
 :language: JSON
 ```
 :::
-:::{admonition} Example JSON-serialized Response (with binary content)
-:class: toggle
+:::{dropdown} Example JSON-serialized Response (with binary content)
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
 ```{literalinclude} ../sample_data/sample_response_binary.json
 :language: JSON
 ```
@@ -53,14 +59,20 @@ Usage:
 >>> session = CachedSession('my_cache', serializer='yaml')
 ```
 
-:::{admonition} Example YAML-serialized Response (with decoded JSON content)
-:class: toggle
+:::{dropdown} Example YAML-serialized Response (with decoded JSON content)
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
 ```{literalinclude} ../sample_data/sample_response_json.yaml
 :language: YAML
 ```
 :::
-:::{admonition} Example YAML-serialized Response (with binary content)
-:class: toggle
+:::{dropdown} Example YAML-serialized Response (with binary content)
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
 ```{literalinclude} ../sample_data/sample_response_binary.yaml
 :language: YAML
 ```
@@ -128,8 +140,11 @@ similar methods with different names (e.g. `compress` / `decompress`), those can
 {py:class}`.Stage`.
 
 For example, a compressed pickle serializer can be built as:
-:::{admonition} Example code
-:class: toggle
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
 ```python
 >>> import gzip
 >>> from requests_cache import CachedSession, SerializerPipeline, Stage, pickle_serializer
@@ -151,8 +166,11 @@ the majority of the work here, and some pre-configured converters are included f
 formats in the {py:mod}`.preconf` module.
 
 For example, a compressed JSON pipeline could be built as follows:
-:::{admonition} Example code
-:class: toggle
+:::{dropdown} Example
+:animate: fade-in-slide-down
+:color: primary
+:icon: file-code
+
 ```python
 >>> import json, gzip
 >>> from requests_cache import CachedSession, SerializerPipeline, Stage, json_serializer, utf8_encoder