I'm using Zola static site generator, and I'd like to hide some long text under foldable elements. I'd like to use Zola shortcodes to achieve this. Please, create a code for me and show me where I should put this code. Also, I'd like it to be in same style wich other elements of my site

To create a foldable element using Zola shortcodes, you need to create a new shortcode file and then use it in your content. Follow these steps:

1. Create a new file named foldable.html inside the templates/shortcodes directory in your Zola project. If the shortcodes directory doesn't exist, create it.

2. Add the following code to the foldable.html file:

{% set id = "foldable-" ~ uuid4() %}
{% set title = title | default(value="Foldable title") %}

<div class="foldable-container" style="margin-bottom: 1rem;">
  <input type="checkbox" id="{{ id }}" class="foldable-toggle" hidden />
  <label for="{{ id }}" class="foldable-title" style="display: block; cursor: pointer; font-weight: bold; user-select: none;">
    {{ title }}
  </label>
  <div class="foldable-content" style="display: none; margin-top: 0.5rem;">
    {{ body }}
  </div>
</div>

<script>
  document.getElementById("{{ id }}").addEventListener("change", function () {
    let content = this.nextElementSibling.nextElementSibling;
    content.style.display = this.checked ? "block" : "none";
  });
</script>

This code creates a foldable element with a title and hidden content. When the title is clicked, the content will be shown or hidden. The id is generated using a UUID to ensure it's unique on the page.

3. Style the foldable element to match your site's design by modifying the inline style attributes or adding your own CSS classes to the elements.

4. Use the foldable shortcode in your content files like this:

{\{ foldable(title="My Foldable Title") }}
Here is the long text that you want to hide under the foldable element.
{{ /foldable }}

Replace "My Foldable Title" with your desired title and put your long text between the opening and closing foldable tags.

Now, when you build your site with Zola, the foldable elements will be generated, and you can click on the title to show or hide the hidden content.

You are a expert in Rust, CSS, HTMP and zola static site generator

You are conversing with another expert, so there is no need to elucidate fundamental engineering concepts.

I have a request and some existing data, and I need your assistance to accomplish it.

To proceed, it is essential to follow these steps:

1. Determine my intention.
2. Familiarize yourself with the available data.
3. Ensure that you have comprehensive knowledge about the data.
4. Feel free to ask me any questions if my intentions are unclear.
5. Request examples of data and its storage location, if necessary, to accomplish your objective.
6. If required, repeat the previous steps.

Afterward, it would be helpful to provide me with suggestions on how to achieve my goals.

My request:

I'm using Zola static site generator, and I'd like to hide some long text under foldable elements. I'd like to use Zola shortcodes to achieve this. Please, create a code for me and show me where I should put this code. Also, I'd like it to be in same style wich other elements of my site

I understand that you want to create a foldable text element in Zola with the same style as the rest of your site. To help you best, could you please provide the following details?

1. Can you share a sample of your site's existing style, perhaps a piece of your CSS or a description of your site's look and feel?
2. What is your preferred behavior for the foldable element? For example, should it unfold on click, hover, or some other action?
3. Would you like a single foldable element, or are you considering nested foldable elements?

Once I have this information, I'll be able to guide you more effectively.

You are a expert in DevOps, Linux and Google Cloud

You are conversing with another expert, so there is no need to elucidate fundamental engineering concepts.

I have a request and some existing data, and I need your assistance to accomplish it.

To proceed, it is essential to follow these steps:

1. Determine my intention.
2. Familiarize yourself with the available data.
3. Ensure that you have comprehensive knowledge about the data.
4. Feel free to ask me any questions if my intentions are unclear.
5. Request examples of data and its storage location, if necessary, to accomplish your objective.
6. If required, repeat the previous steps.

Afterward, it would be helpful to provide me with suggestions on how to achieve my goals.

My request:

matches:
  # Simple text replacement
  - trigger: ":expert"
    form: |
      You are a [[who]]

      You are conversing with another expert, so there is no need to elucidate fundamental engineering concepts.

      I have a request and some existing data, and I need your assistance to accomplish it. 
      
      To proceed, it is essential to follow these steps:
      
      1. Determine my intention.
      2. Familiarize yourself with the available data.
      3. Ensure that you have comprehensive knowledge about the data.
      4. Feel free to ask me any questions if my intentions are unclear.
      5. Request examples of data and its storage location, if necessary, to accomplish your objective.
      6. If required, repeat the previous steps.
      
      Afterward, it would be helpful to provide me with [[what]].
      
      My request:
      
    form_fields:
      who:
        type: list
        values: 
          - expert in DevOps, Linux and Google Cloud
          - expert in DevOps and terraform
          - expert in linux monitoring, statistics and machine learning
          - expert in Clickhouse database, data analysis and SQL
          - expert in product marketing
          - expert in project management and agile
      what:
        type: list
        values: 
          - suggestions on how to achieve my goals
          - resulting code with comments
          - example of code