JSFiddle - React, Tailwind, and code Playground

HTML

<html ng-app="portal">

<div class="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></li>
                        <li><a href="#">Brand</a></li>
                        <li><a href="#">Store</a></li>
                    </ul>
                </div>

                <div class="link-section">
                    <h4>Learning Center</h4>
                    <ul>
                        <li><a href="#">Training Center Home</a></li>
                        <li><a href="#">All Courses</a></li>
                        <li><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');

    /*angular.element(document).ready(function() {
        angular.bootstrap(document, ['portal']);
    });*/

// 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);
			}
		};
	});