SESI 2026 - REMATRÍCULAS
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu Acordeão</title>
<style>
/* Estilos CSS para o Acordeão */
/* 1. Cores e Fontes */
:root {
--azul-escuro: #004080; /* Cor principal de fundo e texto não-ativo */
--cinza-claro: #f8f8f8; /* Fundo padrão do item */
--borda-clara: #ddd; /* Cor da linha divisória */
}
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
}
/* 2. Container e Itens */
.acordion {
width: 100%;
max-width: 800px;
margin: 0 auto;
border: 1px solid var(--borda-clara);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
background-color: white;
}
.acordion-item {
border-bottom: 1px solid var(--borda-clara);
}
.acordion-item:last-child {
border-bottom: none; /* Remove a borda do último item */
}
/* 3. Cabeçalho (Botão Clicável) */
.acordion-header {
background-color: white;
color: var(--azul-escuro);
font-weight: bold;
padding: 15px;
width: 100%;
text-align: left;
border: none;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s, color 0.3s;
display: flex;
justify-content: space-between;
align-items: center;
}
/* Estilo do item ATIVO (como o REGIMENTO na imagem) */
.acordion-item.active .acordion-header {
background-color: var(--azul-escuro); /* Fundo azul escuro */
color: white; /* Texto branco */
}
/* Ícone de Seta (Girar) */
.acordion-header::after {
content: '▼';
font-size: 10px;
transition: transform 0.3s;
}
.acordion-item.active .acordion-header::after {
transform: rotate(180deg);
}
/* 4. Conteúdo Escondido */
.acordion-content {
max-height: 0; /* Altura 0 para esconder */
overflow: hidden;
transition: max-height 0.3s ease-out, padding 0.3s ease-out;
padding: 0 15px;
background-color: white;
}
/* Estado ABERTO do Conteúdo */
.acordion-item.active .acordion-content {
max-height: 500px; /* Um valor grande o suficiente para o conteúdo aparecer */
padding: 15px;
}
/* 5. Estilo do Link dentro do Conteúdo (específico para REGIMENTO) */
.acordion-content p {
margin: 0;
line-height: 1.5;
}
.acordion-content a {
color: var(--azul-escuro);
text-decoration: underline;
}
</style>
</head>
<body>
<div class="acordion">
<div class="acordion-item">
<button class="acordion-header">ETAPAS PARA O PROCESSO DE MATRÍCULA</button>
<div class="acordion-content">
<p>Aqui você encontrará o passo a passo para a matrícula no colégio.</p>
</div>
</div>
<div class="acordion-item">
<button class="acordion-header">PROJETO POLÍTICO PEDAGÓGICO</button>
<div class="acordion-content">
<p>Este documento detalha a missão e os princípios educacionais da instituição.</p>
</div>
</div>
<div class="acordion-item active">
<button class="acordion-header">REGIMENTO</button>
<div class="acordion-content">
<p>
<a href="#">Clique aqui</a> e acesse o Regimento do Colégio Santo Inácio.
</p>
</div>
</div>
<div class="acordion-item">
<button class="acordion-header">CONTRATO DE PRESTAÇÃO DE SERVIÇOS EDUCACIONAIS</button>
<div class="acordion-content">
<p>Veja os termos e condições da prestação de serviços educacionais.</p>
</div>
</div>
<div class="acordion-item">
<button class="acordion-header">HORÁRIOS DE AULA</button>
<div class="acordion-content">
<p>Consulte o quadro de horários para todas as turmas.</p>
</div>
</div>
<div class="acordion-item">
<button class="acordion-header">ROTEIROS DE ESTUDO PARA SONDAGEM DIAGNÓSTICA</button>
<div class="acordion-content">
<p>Roteiros de preparação para as avaliações diagnósticas.</p>
</div>
</div>
<div class="acordion-item">
<button class="acordion-header">DOCUMENTOS NECESSÁRIOS PARA EFETIVAÇÃO DA MATRÍCULA</button>
<div class="acordion-content">
<p>Lista completa dos documentos exigidos para a matrícula.</p>
</div>
</div>
</div>
<script>
document.querySelectorAll('.acordion-header').forEach(header => {
header.addEventListener('click', () => {
const item = header.parentElement;
const isCurrentlyActive = item.classList.contains('active');
// Fechar todos os outros itens (opcional, para ter comportamento de sanfona)
document.querySelectorAll('.acordion-item').forEach(otherItem => {
if (otherItem.classList.contains('active')) {
otherItem.classList.remove('active');
}
});
// Abrir/Fechar o item clicado
if (!isCurrentlyActive) {
item.classList.add('active');
}
});
});
</script>
</body>
</html>
DIVULGAÇÃO
