JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<nav>
    <ul>
        <li>Home</li>
        <li>A Empresa</li>
        <li><a href="#" id="item3link" style="text-decoration: none; text-color:Black;">Portfolio <span id="item3icon">+</span></a>
            <ul id="list" class="subClassHide">
                <li>Comerciais</li>
                <li>Residenciais</li>
                <li>Institucionais</li>
                <li>Edifícios</li>
            </ul>
        </li>
        <li><a href="#" id="item3link" style="text-decoration: none; text-color:Black;">Portfolio <span id="item3icon">+</span></a>
            <ul id="list" class="subClassHide">
                <li>Comerciais</li>
                <li>Residenciais</li>
                <li>Institucionais</li>
                <li>Edifícios</li>
            </ul>
        </li>
    </ul>
</nav>

CSS

.subClassHide {
	display: none;
}

@import url(http://fonts.googleapis.com/css?family=Lato:900);

*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	margin:0;
	padding:0;
	-webkit-touch-callout: none;
	-webkit-text-size-adjust: none;
	-webkit-user-select: none;
	-webkit-highlight: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);

}

html{
	font-size: 16px;
	-webkit-transition:all .15s ease;
}

body{
	font-family: 'Lato',Arial, sans-serif;
	text-transform: uppercase;
}

a{
    color: inherit;
    text-decoration: none;
}

nav{
    margin: .5em;
    padding: .5em;
}

nav:before, nav:after{
    content: '';
    display: block;
    background: #000;
    height: .3em;
    width: 1.2em;
}

nav ul{
    list-style: none;
}

nav>ul>li{
    cursor: pointer;
    line-height: 1.8em;
}

#list li{
    color: #800;
    font-size: .7em;
    position: relative;
    margin-left: 1.5em;
}

#list li:after{
    content: '';
    display: block;
    background: #800;
    height: 2px;
    width: .4em;
    position: absolute;
    top: 50%;
    left:-.8em;
}

#list.open {
     display: block;  
}

JavaScript

$('#item3link').on('click', function(){
    if (toggleOn == 1) {
        toggleOn = 0;
        $('#item3icon').html('+');
        $('#list').addClass("subClassHide");
    }
    else
    {
        toggleOn = 1;
        $('#item3icon').html('-');
        $('#list').removeClass("subClassHide");
    }
});

var toggleOn = 0;