JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<nav class="bg-nav">
	<h1>O COLÉGIO</h1>
<ul class="nav-internas">
	<li><a href="/o-colegio/historia">história</a></li>
	<li><a href="/o-colegio/missao-visao">missão / visão</a></li>
	<li><a href="#">estrutura</a>
							<ul>					
								<li><a href="/o-colegio/estrutura/espaco-fisico">espaço físico</a></li>
								<li class="seta"></li>
								<li><a href="/o-colegio/estrutura/tecnologia">tecnologia</a></li>
								<li><a href="/o-colegio/estrutura/enfermagem">enfermagem</a></li>
								<li><a href="/o-colegio/estrutura/uniformes">uniformes</a></li>
								<li><a href="/o-colegio/estrutura/transporte">transporte</a></li>
							</ul>
						</li>					
						<li><a href="/o-colegio/proposta-pedagogica">proposta pedagógica</a></li>
		 				<li><a href="/o-colegio/atividades-extracurriculares/apresentacao">atividades extracurriculares</a>
							<ul>
								<li><a href="/o-colegio/atividades-extracurriculares/futsal">futsal</a></li>
								<li class="seta"></li>
								<li><a href="/o-colegio/atividades-extracurriculares/judo">judô</a></li>
								<li><a href="/o-colegio/atividades-extracurriculares/xadrez">xadrez</a></li>
								<li><a href="/o-colegio/atividades-extracurriculares/robotica">robótica</a></li>
								<!-- <li><a href="/o-colegio/atividades-extracurriculares/processo-criacao-artistica">processos de criação artística</a></li>
								<li><a href="/o-colegio/atividades-extracurriculares/oficina-ceramica-modelagem">oficina cerâmica/ modelagem</a></li> -->
								<li><a href="/o-colegio/atividades-extracurriculares/oficina-pintura-tela">oficina de pintura em tela</a></li>
								<li><a href="/o-colegio/atividades-extracurriculares/oficina-arte-papel">oficina de arte em papel</a></li>
								<li><a href="/o-colegio/atividades-extracurriculares/oficina-leitura-escrita">oficina de leitura e escrita</a></li>
								<li><a href="/o-colegio/atividades-extracurriculares/teatro">teatro</a></li>
								<li><a...

CSS

div.mobile-accordion{display:none;}
span.mobile-accordion{display:block;cursor:pointer;}

JavaScript

$(document).ready(function() {
    var $window = $(window),
        $html = $('html');
    if ($window.width() < 600) {
        $('.nav-internas').wrap('<div class="mobile-accordion" />');
        $( ".bg-nav h1" ).after( '<span class="mobile-accordion">abrir</span>');
        
        $('span.mobile-accordion').click(function(){                        
            $(this).parent().find('div.mobile-accordion').slideToggle("slow");
        });
     }
    else {
    }
});