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.

Referência rápida

Substitua Accordion_name pelo título do seu acordeão e Accordion_content pelo seu conteúdo.

<details>
    <summary>Accordion_name</summary>
    <p>Accordion_content</p>
</details>

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

<details open>
    <summary>Always open accordion</summary>
    <p>Content remains visible without user interaction.</p>
</details>

Você pode usar etiquetas de cabeçalho (<h2>, <h3>, <h4>) dentro da Accordion_content seção para estruturar o conteúdo do corpo.

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.

<details>
    <summary>Accordion_name</summary>
    <p>Accordion_content</p>
</details>

3. Substitua Accordion_name pelo título acordeão que você deseja.
4. 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:

<details>
    <summary><strong>What is Document360?</strong></summary>
    <p>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.</p>
    <h4>Core parts</h4>
    <ul>
        <li>Knowledge base portal</li>
        <li>Knowledge base site</li>
        <li>Knowledge base widget</li>
        <li>API documentation</li>
    </ul>
</details>

Desfecho:

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

FAQ