JSFiddle - React, Tailwind, and code Playground

by Samar Pattanayak

HTML

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<html ng-app="portal">
    <div class="nav" ng-controller="NavController as nav">
        <ul>
            <li><a class="unactive_top top_link_grow" href="" data-content="grow" ng-click="nav.clicked('grow')">Grow</a>
            </li>
            <li><a class="unactive_top top_link_products" href="" data-content="products" ng-click="nav.clicked('products')">Products</a>
            </li>
        </ul>
        <hr>
        <div class="sub_navigation" ng-controller="SubNavController as subNav">
            <section class="grow-content sub_content">
                <div class="row">
                    <div class="sub_links_container sub_links_grow">
                        <div class="link-section">
                             <h4>Program</h4>

                            <ul>
                                <li><a href="#">IRU Sponsorship Program</a>
                                </li>
                                <li><a href="#">Overview</a>
                                </li>
                                <li><a href="#">Getting Started</a>
                                </li>
                            </ul>
                        </div>
                        <div class="link-section">
                             <h4>Incentives &amp; Promotions</h4>

                            <ul>
                                <li><a href="#">Incentives</a>
                                </li>
                                <li><a href="#">Promotions</a>
                                </li>
                            </ul>
                        </div>
                        <div class="link-section">
                             <h4>Marketing Toolkit</h4>

                            <ul>
                                <li><a href="#">Tools</a>
                                </li>
                                <li><a href="#">Market Development Funds</a>
                         ...

SCSS

body {
    font-family: Arial;
}

.nav {
    li {
        float: left;
        margin-right: 40px;
        padding: 5px 10px;
        list-style: none;
        color: blue;
        background: cyan;
        cursor: pointer;
        
        &:hover {
            color: white;
            background: blue;    
        }
    }
    
    hr {
        position: relative;
        top: 10px;
        width: 100%;
    }
}

.sub_navigation {	
	margin-top: 70px;
	font-family: "omnesatt_iiregular";
	color: #fff;	
	display: block;
	height: 0px;
	width: 100%;
	background: blue;
	overflow: hidden;
}

.sub_content {
	margin: 0 auto;
	padding: 40px 40px 20px 40px;
}

.grow-content,
.products-content,
.manage-content, 
.connect-content {
	height: auto;
	display: none;
}

.sub_links_container {
	margin: 0 auto;
	padding: 0;	
}

JavaScript

var app = angular.module('portal', []);

// Sub nav

app.controller('SubNavController', function ($scope) {})

// Controller for Nav
app.controller('NavController', function () {

    var contentHeight = 0;

    this.clicked = function (menuItem) {

        console.log(menuItem);

        if ($('.' + menuItem + '-content').css('display') == 'block') {

            console.log('close');

            $('.' + menuItem + '-content').css({
                'display': 'none'
            });
            $('.top_link_' + menuItem).removeClass('active_top');
            $('.top_link_' + menuItem).addClass('unactive_top');
            $('.sub_navigation').animate({
                height: '0px'
            });

        } else {

            console.log('open');

            window.scrollTo(0, 0);
            $('.sub_navigation').css({
                'height': '0px'
            });
            $('.' + menuItem + '-content').css({
                'display': 'block',
                'height': 'auto'
            });
            $('.' + menuItem + '-content').siblings().css({
                'display': 'none'
            });
            $('#nav_desktop a').removeClass('active_top');
            $('.top_link_' + menuItem).removeClass('unactive_top');
            $('.top_link_' + menuItem).addClass('active_top');
            contentHeight = $('.' + menuItem + '-content').innerHeight();
            $('.sub_navigation').animate({
                height: contentHeight
            });

            console.log(contentHeight);

            setTimeout(function () {
                $('.sub_navigation').css({
                    'height': '600px !important'
                });
                $('.' + menuItem + '-content').css({
                    'height': '600px !important'
                });
                console.log($('.sub_navigation').height);
            }, 300);
        }
    };
});