CONTEÚDO

1. Visão Geral
2. Tela Cadastrar Garantia
3. Vídeo Explicativo

01. VISÃO GERAL

Cadastro do bem que será utilizado como garantia de operação de crédito

02. EXEMPLO DE UTILIZAÇÃO

<!-- Contêiner principal -->
<div class="menu-container">  
  <!-- Menu Item: -->
  <div class="menu-item">
    <div class="menu-header" onclick="toggleMenu(this)">
      <span>Cadastro Garantia - Vídeo</span>
      <span class="menu-arrow">▶</span>
    </div>
    <div class="menu-content">
      <div class="submenu-title"></div>
      <div class="submenu-description">
      </div>
      <ul class="submenu-items">
        <li class="submenu-item">
        <a href="https://tdn.totvs.com/display/TBC/Video+-+Cadastrar+Garantia" class="submenu-link"><strong>⮩ Veja um vídeo alto explicativo</a></strong>
         </li>
      </ul>
    </div>
  </div>
  
</div> 
<style>
    /* Estilos para o menu */
    .menu-container {
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        font-family: Arial, sans-serif;
    }

    .menu-item {
        margin-bottom: 20px;
        border: 1px solid #ddd;
        border-radius: 6px;
        overflow: hidden;
    }

    .menu-header {
        background-color: #6B8E23;
        color: white;
        padding: 12px 15px;
        cursor: pointer;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .menu-header:hover {
        background-color: #b0ee00;
        color: black;
    }

    .menu-content {
        display: none;
        padding: 0 15px 15px;
        background-color: white;
    }

    .submenu-title {
        font-weight: bold;
        margin: 15px 0 10px;
        color: #444;
    }

    .submenu-description {
        margin-bottom: 10px;
        line-height: 1.5;
    }

    .submenu-items {
        list-style-type: none;
        padding-left: 20px;
        margin-top: 10px;
    }

    .submenu-item {
        margin-bottom: 10px;
    }

    .submenu-item-title {
        font-weight: bold;
        margin-bottom: 5px;
        cursor: pointer;
        color: #0066cc;
        text-decoration: none;
        display: block;
    }

    .submenu-item-title:hover {
        text-decoration: underline;
    }

    .submenu-item-description {
        margin-left: 20px;
        margin-bottom: 8px;
    }

    .submenu-link {
        color: #0066cc;
        text-decoration: none;
        display: block;
        margin-left: 40px;
        margin-top: 5px;
    }

    .submenu-link:hover {
        text-decoration: underline;
    }

    /* Classe para mostrar o conteúdo */
    .menu-content-visible {
        display: block;
    }

    /* Estilo para a seta */
    .menu-arrow {
        transition: transform 0.3s;
    }

    .menu-arrow-down {
        transform: rotate(90deg);
    }
</style>

<script>
    // Função simples para alternar a visibilidade do menu
    function toggleMenu(header) {
        // Função JavaScript mais simples possível
        var content = header.nextElementSibling;

        // Verifica se o conteúdo existe
        if (content) {
            // Alterna a classe para mostrar/esconder o conteúdo
            if (content.style.display === "block") {
                content.style.display = "none";

                // Atualiza a seta
                var arrow = header.querySelector(".menu-arrow");
                if (arrow) {
                    arrow.innerHTML = "▶";
                    arrow.className = "menu-arrow";
                }
            } else {
                content.style.display = "block";

                // Atualiza a seta
                var arrow = header.querySelector(".menu-arrow");
                if (arrow) {
                    arrow.innerHTML = "▼";
                    arrow.className = "menu-arrow menu-arrow-down";
                }
            }
        }
    }

    // Garantir que o script funcione em todos os navegadores
    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", function () {
            console.log("Menu HTML carregado");
        });
    } else {
        console.log("Menu HTML carregado");
    }
</script>
</script>