If you desire the first item to be visible when the page loads, simply add the class show to the first dropup: <div class="dropup show">. If you prefer both dropups to remain invisible until <image-container> is clicked, use: <div class="dropup">:
I trust that I have correctly understood your requirements and that this solution meets your needs:
$(document).ready(function () {
$(".image-container").on('click', function () {
var delayTime = 250;
var $dropup = $(this).next(".dropup");
if($dropup.is(':visible')){
$dropup.delay(delayTime).slideUp(200);
} else {
$dropup.delay(delayTime).slideDown(200);
}
$(".dropup").hide();
});
});
.application-container{
position: relative;
}
/* The dropup container */
.dropup{
float: left;
overflow: hidden;
position: initial;
display: none;
}
.dropup.show {
display: block;
}
/* Dropup content (hidden by default) */
.dropup-content {
width:100%;
bottom:-100%;
left:0%;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: -1;
}
<div class="container application-container">
<div class="row seven-rows">
<div class="column text-center image-container">
<img src="http://lorempixel.com/69/61/" width='69' height='61' alt="e-commerce">
<p class="mt-2 text-custom">E Commerce</p>
</div>
<div class="dropup show">
<div class="dropup-content pt-4 pb-4">
<div class="row">
<div class="col-lg-8 ml-5">
<h3> Innovative Omnichannel E-Commerce Solutions</h3>
<p>AOE develops flexible and high-performance Enterprise E-Commerce portals. Our solutions digitize business
processes and create efficient, profitable platforms for providers and customers.</p>
<a class="btn btn-custom">E Commerce Solutions</a>
</div>
<div class="col-lg-4">
</div>
</div>
</div>
</div>
<div class="column text-center image-container">
<img src="http://lorempixel.com/69/61/" width='69' height='61' alt="web portals">
<p class="mt-2 text-custom">Web Portals</p>
</div>
<div class="dropup">
<div class="dropup-content">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="col-lg-8">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="col-lg-4">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>