Como adicionar acordeão no Markdown?

Planos que suportam a personalização de texto no editor de markdown

Se você deseja que seu conteúdo apareça como um acordeão em artigos baseados no editor Markdown, não há opção para adicioná-lo usando uma ferramenta convencional da barra de menus ou uma sintaxe Markdown direta.

Use a solução alternativa abaixo para adicionar um acordeão sem esforço no editor Markdown.

Solução

1. Vá para o artigo desejado e abra-o no editor Markdown.

2. Cole o código abaixo no local desejado onde deseja que o acordeão apareça

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

3. Substitua o Accordion_name texto pelo título/nome sanfonado desejado

4. Substitua o Accordion_content texto pelo conteúdo desejado

Se você quiser adicionar títulos dentro do acordeão, você pode usar as tags HTML do título (<h2>..</h2>, <h3>..</h3>, <h4>..</h4>) nas Accordion_content seções

Exemplo

Código

<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>

Resultado

Personalizações avançadas para acordeões

Você pode aprimorar o acordeão adicionando cores, bordas pontilhadas e ícones e configurando-o para sempre aberto. Veja como aplicar essas personalizações:

Adicionando cor de cabeçalho ao acordeão

Para adicionar a cor do cabeçalho ao acordeão nos artigos, siga as etapas abaixo:

1. Navegue até Configurações () > site da base de conhecimento > Personalizar site > CSS e JavaScript personalizados no portal da base de conhecimento.

2. No painel de navegação esquerdo, clique na guia CSS e cole o seguinte snippet de CSS:

.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;
}

3. Clique em Salvar.

Aplicando uma cor de borda e linhas pontilhadas

Para aplicar uma cor de borda e linhas pontilhadas ao passar o mouse:

1. Navegue até Configurações () > site da base de conhecimento > Personalizar site > CSS e JavaScript personalizados no portal da base de conhecimento.

2. No painel de navegação esquerdo, clique na guia CSS e cole o seguinte snippet de CSS:

.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);
}

3. Personalize o código acima com base em suas necessidades.

4. Uma vez feito isso, clique em Salvar.

Configurando um acordeão para sempre abrir

Para manter um acordeão sempre aberto, modifique o open atributo diretamente no HTML:

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

Isso garante que o conteúdo esteja visível por padrão.

Adicionando um ícone de adição ao cabeçalho sanfonado

Para adicionar um ícone de adição que gira ao abrir:

1. Navegue até Configurações () > site da base de conhecimento > Personalizar site > CSS e JavaScript personalizados no portal da base de conhecimento.

2. No painel de navegação esquerdo, clique na guia CSS e cole o seguinte snippet de CSS:

   .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);
   }

3. Ajuste ícones ou transições conforme preferir.

4. Clique em Salvar.

Perguntas frequentes