JSFiddle - React, Tailwind, and code Playground

by hassan javed

HTML

<div class="areas-nav cf">
            	<ul>
                	<li><a href="#" id="prod1">Direito Ambiental</a></li>
                	<li><a href="#" id="prod2">Direito Ambiental</a></li>
                	<li class="marg"><a href="#" id="prod3">Direito Ambiental</a></li>
                </ul>
            </div><!-- .areas-nav -->
            <div class="areas-text det1 cf">
            	<div class="arrow"><img src="images/institucional-tab-arrow.png" alt="" /></div><!-- .arrow -->
            	1Oportuno ressaltar que o Direito Ambiental possui natureza jurídica diferenciada. Trata-se de um direito difuso, ou de terceira geração, uma vez que os interesses resguardados não são nem de direito público, nem de direito privado - a proteção não cabe a um titular exclusivo, mas a toda a coletividade e a cada um de seus membros. Nesse sentido, é correto afirmar que o Direito Ambiental possui como uma de suas características primordiais a transindividualidade, de modo que o objeto protegido pertence, ao mesmo tempo, a todos e a ninguém, devendo a coletividade unir forçar para resguardá-lo.<br /><br />

Todavia, o cumprimento das normas ambientais não é tarefa simples, mormente porque estas se encontram distribuídas nas esferas federal, estadual e municipal, o que dificulta o acesso e aplicabilidade. Assim, a NW&ADV tem o condão de auxiliar o cliente na aplicação de tais normais, buscando a forma mais adequada e menos onerosa para seu atendimento e oferece, neste contexto, os serviços elencados abaixo:<br /><br />
• Consultoria Preventiva e Planejamento Ambiental, mediante apoio jurídico completo em temas relacionados à legislação ambiental; assessoria jurídica na obtenção, manutenção e renovação de licenças ambientais; avaliação jurídica da viabilidade ambiental de empreendimentos potencialmente poluidores; acompanhamento de clientes em audiências públicas de interesse da atividade, dentre outros.<br /><br />
• Consultoria para regularização do pagamento de tributos e...

CSS

/* areas-nav */
.areas-nav{ clear:both; padding:0 0 20px 0;}
	.areas-nav ul{ margin:0; padding:0; list-style:none;}
	.areas-nav ul li{ float:left;}
	.areas-nav ul li a{ width:290px; height:28px; line-height:28px; background:#c08d33 url(../images/areas-nav-bg-.png) 274px center no-repeat; display:block; font-size:17px; font-family:'Palatino'; color:#fff; margin:0 13px 0 0; padding:0 0 0 10px;}
	.areas-nav ul li a:hover{ text-decoration:none; color:#d2ab67; background:#f7edda url(../images/areas-nav-bg-hover.png) 274px center no-repeat;}
	.areas-nav ul li.marg a{ margin:0;}
	.areas-text{ padding:20px 10px; clear:both; background:#e8d5b3; font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:0 0 30px 0; color:#565554; display:none;}
	
	
	.areas-text{ position:relative;}
	.areas-text.det1 .arrow, .areas-text.det4 .arrow, .areas-text.det7 .arrow{ width:26px; height:14px; float:left; position:absolute; left:127px; top:-14px;}
.areas-text.det2 .arrow, .areas-text.det5 .arrow{ width:26px; }

JavaScript

$(function () {

    jQuery('a[id^="prod"]').on('click', function (e) {
        var id = $(this).attr('id').slice(-1);
        var previs = $('div.areas-text:visible');
        $('div.areas-text').hide();
        if (previs.is($('.det' + id))) {
            $('.det' + id).hide()
        }
        else
        {
            $('.det' + id).show();
        }
        
        //if (detailedDiv.is(':visible')) detailedDiv.hide();
        //else detailedDiv.show();
        e.preventDefault()
    });

});