JSFiddle - React, Tailwind, and code Playground

by mobilat

HTML

<div class="container-fluid">
    
    
    	<nav class="cbp-hrmenu1 container">
				
				<ul class="mainNav">
				
					<li class="noLinkTrigger">
						<a href="#">MainNav1</a>
					</li>
					<li class="noLinkTrigger">
						<a href="#">MainNav2</a>
					</li>
					<li class="noLinkTrigger">
						<a href="#">MainNav3</a>
					</li>
					<li class="">
						<a href="#">MainNav4</a>
					</li>
				</ul>
				
    	</nav>
    	
		<div id="Slider0" class="slideup">

            <div class="mainNavPanel">
            
				<ul>
					<li><a href="">Sub 1 _ 1</a></li>
			    	<li><a href="">Sub 1 _ 2</a></li>
			    	<li><a href="">Sub 1 _ 3</a></li>
			    	<li><a href="">Sub 1 _ 4</a></li>
			    	<li><a href="">Sub 1 _ 5</a></li>
				</ul>

            </div>
        </div>

        
		<div id="Slider1" class="slideup">
            <div class="mainNavPanel">

				<ul>
					<li><a href="">Sub 2 _ 1</a></li>
			    	<li><a href="">Sub 2 _ 2</a></li>
			    	<li><a href="">Sub 2 _ 3</a></li>
				</ul>

            </div>
        </div>
        
		<div id="Slider2" class="slideup">

            <div class="mainNavPanel">

				<ul>
					<li><a href="">Slider 3 _ 1</a></li>
			    	<li><a href="">Slider 3 _ 2</a></li>
			    	<li><a href="">Slider 3 _ 3</a></li>
				</ul>

            </div>
        </div>

    </div><!-- / slideup -->
</div><!-- / container -->


<div class="container-fluid bgBeige borderBottomBrown">

  <div class="container">

	  <div class="row no-gutter">
	  
	    <div class="col-xs-12">
		    <img src="http://placehold.it/940x200/cccccc" class="img-responsive" alt="">
	    </div>
	    
	  </div><!-- /row -->

  </div><!-- /container -->
  
</div><!-- /container-fluid -->

CSS

.container {
	    	position: relative;	
    	}
    	
        #Slider {
            
        }
        
        .mainNav {
	        float: right;
        }
        
        .mainNav li {
	        display: inline;
	        float: left;
	        margin: 0 1em 0 0;
        }
        
        .mainNavPanel {
			background-color: aqua;
			color: white;
			min-height: 150px;
        }
        
        .slideup, .slidedown {
            max-height: 0; /* hide first */
            min-height: 0;
            
            overflow-y: hidden;
            
            width: 100%;
            
            -webkit-transition: min-height 0.5s ease-in-out;
            -moz-transition: min-height 0.5s ease-in-out;
            -o-transition: min-height 0.5s ease-in-out;
            transition: min-height 0.5s ease-in-out;
        }
        
        .slidedown {            
            min-height: 150px;
        }

JavaScript

$('li.noLinkTrigger').each(function (index) {

    $(this).addClass('item-' + index);

    $(this).click(function () {



        if ($('#Slider' + index).hasClass("slideup")) {
            // .slideup any .slidedown divs
            $('.slidedown').removeClass("slidedown").addClass("slideup");
            $('#Slider' + index).removeClass("slideup").addClass("slidedown");
        } else {
            $('#Slider' + index).removeClass("slidedown").addClass("slideup");
        }
    });

});