--- title: "Como adicionar acordeão no Markdown" slug: "how-to-add-accordion-in-markdown" description: "Use the simple workaround to add accordion in your Markdown editor. This workaround is brought to you by the Document360 Knowledge base platform for your documentation. " tags: ["Customization"] updated: 2026-06-22T08:58:57Z published: 2026-06-22T08:58:57Z canonical: "docs.document360.com/how-to-add-accordion-in-markdown" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # Como adicionar acordeão no Markdown O editor Markdown não suporta acordeões nativamente. A solução alternativa é usar o HTML `<details>` e `<summary>` as tags, que o editor Markdown do Document360 renderiza como um acordeão dobrável. A `<details>` tag envolve todo o acordeão, `<summary>` define o cabeçalho clicável, e qualquer conteúdo dentro é renderizado como o corpo expansível. --- ## Quando usar acordeões - **Artigos longos com detalhes opcionais** - colapsam informações suplementares que apenas alguns leitores precisam, mantendo o artigo escaneável sem remover conteúdo. - **Perguntas frequentes ou seções de solução de problemas** - perguntas e respostas em grupo para que os leitores possam pular para o que é relevante para eles. - **Guias passo a passo com subetapas** – inclua detalhes adicionais dentro de uma seção dobrável para evitar sobrecarregar os leitores à primeira vista. NOTA Essa técnica só funciona no **editor Markdown**. No editor avançado WYSIWYG, use o bloco de acordeão embutido do menu Insert. --- ## Referência rápida Substitua `Accordion_name` pelo título do seu acordeão e `Accordion_content` pelo seu conteúdo. ```
   Accordion_name    

Accordion_content

``` Para manter um acordeão expandido por padrão, adicione o `open` atributo: ```
   Always open accordion    

Content remains visible without user interaction.

``` Você pode usar etiquetas de cabeçalho (`<h2>`, `<h3>`, `<h4>`) dentro da `Accordion_content` seção para estruturar o conteúdo do corpo. AVISO Tags de cabeçalho podem ser usadas dentro da `<summary>` seção, mas isso pode afetar o alinhamento do texto no cabeçalho do acordeão. --- ## Como adicionar um acordeão no Markdown 1. Abra o artigo desejado no editor Markdown. 2. Cole o trecho abaixo no local onde você quer que o acordeão apareça. ```
   Accordion_name    

Accordion_content

``` 1. Substitua `Accordion_name` pelo título acordeão que você deseja. 2. Substitua `Accordion_content` pelo conteúdo que você deseja. Você pode usar etiquetas de cabeçalho (`<h2>`, `<h3>`, ), `<h4>`listas e parágrafos dentro desta seção. **Código de exemplo:** ```
   What is Document360?    

A well-structured product to create a world-class knowledge base for your customers and employees. Content producers get the power, whereas content consumers get the simplicity.

   

Core parts

   
``` **Desfecho:** ****O que é o Document360?****         Um produto bem estruturado para criar uma base de conhecimento de classe mundial para seus clientes e funcionários. Os produtores de conteúdo têm o poder, enquanto os consumidores de conteúdo têm a simplicidade.     #### Partes centrais     - Portal da base de conhecimento - Site da base de conhecimento - Widget da base de conhecimento - Documentação da API --- ## Customizações avançadas Você pode melhorar a aparência do acordeão usando CSS personalizado aplicado nas **Configurações** > **site da base de conhecimento** > **na aba CSS & JavaScript personalizada** > **CSS** . ### Adicionando uma cor de cabeçalho Cole o CSS seguinte para aplicar uma cor de fundo no cabeçalho do acordeão. Substitua `yellow` pela cor que você deseja. ``` .details-wrapper details[open] summary {    background-color: yellow !important;    border-radius: 0.75rem 0.75rem 0rem 0rem !important; } .details-wrapper summary {    background-color: yellow !important;    border-radius: 0.75rem 0.75rem 0.75rem 0.75rem !important; } .details-wrapper details:not([open]) summary {    background-color: yellow !important;    border-radius: 0.75rem 0.75rem 0.75rem 0.75rem !important; } ``` Clique **em Salvar** quando terminar. ### Aplicando uma cor de borda e linhas pontilhadas no hover Cole o CSS seguinte para adicionar uma borda pontilhada que fique sólida ao passar o cursor. Ajuste os valores conforme necessário. ``` .details-arrow {    left: 16px !important;    top: 42% !important;    transition: revert;    transform: rotate(317deg); } .details-wrapper details {    border: 1px dotted var(--e360-base-light-gray) !important;    transition: border 0.3s ease; } .details-wrapper details:hover {    border: 1px solid var(--e360-base-light-gray) !important; } .details-wrapper_rendered summary {    left: 19px;    position: relative; } .details-wrapper details[open]+.details-arrow {    transform: rotate(45deg); } ``` Clique **em Salvar** quando terminar. ### Adicionando um ícone mais/menos ao cabeçalho do acordeão Cole o CSS seguinte para exibir um `+` ícone que gira quando `-` o acordeão está aberto. Ajuste ícones ou transições conforme preferir. ``` .details-wrapper details summary::before {    content: "+";    display: inline-block;    margin-right: 10px;    transition: transform 0.3s ease; } .details-wrapper details[open] summary::before {    content: "-";    transform: rotate(45deg); } ``` Clique **em Salvar** quando terminar. --- ## Escopo e cobertura | Item | Detalhes | | --- | --- | | Conteúdo suportado dentro do corpo do acordeão | Parágrafos, títulos (H2–H4), listas, HTML inline | | Etiquetas de rumo em `<summary>` | Suportado, mas pode afetar o alinhamento do texto | | Estado padrão | Colapsado — adicionar `open` atributo para manter expandido por padrão | | Suporte de estilo | CSS personalizado necessário para cores, bordas e ícones | | Suporte ao navegador | Funciona em todos os navegadores modernos; pode não renderizar em todos os ambientes Markdown | --- ## FAQ   **Posso estilizar um acordeão usando apenas o Markdown?**               O Markdown sozinho não suporta estilo avançado ou interatividade. Você pode criar um acordeão dobrável básico usando as `<details>` tags HTML e `<summary>` do Markdown, mas cores, bordas e animações exigem CSS personalizado aplicado pelas configurações do site da Knowledge Base.           **Quais são as limitações de usar o Markdown para acordeões?**               - **Suporte ao navegador** — os `<details>` elementos and `<summary>` funcionam na maioria dos navegadores modernos, mas podem não renderizar corretamente em todos os ambientes Markdown. - **Estilo** — você não pode estilizar o acordeão além dos estilos padrão do navegador sem adicionar CSS personalizado. - **Interatividade** — o comportamento do acordeão é limitado a colapsar e expandir. Animações e opções avançadas de design exigem CSS ou JavaScript.           **Como faço para criar um acordeão básico no Markdown?**               Use as `<details>` tags e `<summary>` diretamente no editor Markdown. Isso cria um acordeão dobrável sem nenhum CSS ou JavaScript. Para um estilo aprimorado, adicione CSS personalizado através **de Configurações** > **site da base de conhecimento** > **CSS e JavaScript personalizados**. ## Related - [Como alinhar o texto no Markdown no centro](/how-to-center-align-the-text-in-markdown.md) - [Como adicionar espaço extra no Markdown](/how-to-add-extra-space-in-markdown.md)