Isenção de responsabilidade: Este artigo foi gerado usando tradução automática.

Como adicionar acordeão no Markdown?

Prev Next

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

Plans supporting this feature: Professional Business Enterprise

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>
  1. Substitua o Accordion_name texto pelo título/nome sanfonado desejado

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

CUIDADO

As tags de cabeçalho podem ser usadas na seção de resumo do acordeão "Accordion_name", mas o alinhamento do texto pode ser afetado.

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

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 obtêm o poder, enquanto os consumidores de conteúdo obtêm a simplicidade.

Peças principais

  • Portal da base de conhecimento

  • Site da base de conhecimento

  • Widget da base de conhecimento

  • Documentação da API


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;
}
  1. 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);
}
  1. Personalize o código acima com base em suas necessidades.

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

Posso estilizar um acordeão usando apenas Markdown?

O Markdown por si só não oferece suporte a estilo avançado ou interatividade como você encontraria em HTML e CSS. No entanto, você pode obter um efeito de acordeão simples usando os recursos internos do Markdown, principalmente com plataformas que dão suporte a ele, como o Document360.

Quais são as limitações de usar Markdown para acordeões?

  • Suporte ao navegador: Os <details> elementos and <summary> funcionam na maioria dos navegadores modernos, mas podem não ser renderizados corretamente em todos os ambientes Markdown.

  • Estilização: Você não poderá estilizar o acordeão (por exemplo, cores, bordas) além dos estilos padrão do navegador.

  • Interatividade: A interatividade é limitada a recolher e expandir o texto sem animações adicionais ou opções de design.

Como posso criar um acordeão usando Markdown?

Usar as <details> tags and <summary> no Markdown é a melhor maneira de criar um acordeão básico sem CSS ou JavaScript adicional. Para estilos ou recursos aprimorados, você precisaria recorrer a HTML e CSS ou usar um processador Markdown que permite estilos personalizados.