We Keep Coding

Collapsible side menu with CSS flexbox

I'm trying to create a collapsible sidebar on the left.
I want to set it up real simple: 2 columns which contains of 2 flex boxes, and when a button is pushed: the left flex box increases in width and the tight flexbox just moves with. When the button is clicked again, the flexbox on the left decreases again in side, back to the first state where the menu cannot be seen.
My problem is that I don't know how a click event of a button can control the width size of the flexbox.
What I have now is this:
html
<div>
<button
onClick={handleViewMenu}??
style={{ height: "30px", width: "30px" }}>
</button>
</div>
<div className='container'>
<div className='container-left'>
Left
</div>
<div className='container-right'>
right
</div>
</div>
scss
.container { width: 100vw;
height: 100vh;
display: flex;
&-left {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
// flex: 0.3 0 auto;
// background-color: aqua;
} &-right {
flex: 1 0 auto;
}
}
I just don't know how to deal with the onClick event (where I put the ??. I work in React so I found different things like:
const [sideMenuOpen, setMenuOpen] = useState(false);
const handleViewMenu = () => {
setMenuOpen(!sideMenuOpen);
};
But it should be pretty easy to handle this I think, but I can't find a solution..

Here's a solution that doesn't need javascript by using the :has() pseudo class. Just set the width of the side bar when the checkbox is clicked and if you're using normal flexbox the right hand one will automatically shift to suit. See below. Any questions drop me a comment.
/* essential to add this as there's a default 8px margin */
body {
margin: 0;
}
/* this is also essential to avoid a world of width-based pain */
* {
box-sizing: border-box;
}
/* Just making things pretty here */
nav {
display: flex;
width: 100%;
gap: 1rem;
padding: 0.5rem 1rem;
background-color: purple;
color: white;
}
/*the menu button is basically a hidden check box, we use label to style it as a button */
.menubutton>input {
display: none;
}
/*these toggles the display of the menu button, it works because the label after the input element */
.menubutton>input:checked+label .not-active {
display: none;
}
.menubutton>input:not(:checked)+label .active {
display: none;
}
.container {
display: flex;
width: 100%;
}
.container-left {
background-color: plum;
height: 50vh;
padding: 0.5rem 0.5rem;
border: 1px solid transparent;
width: 3rem;
transition: width 300ms;
}
/* this is the bit that styles the width of the sidebar when the checkbox is checked. */
body:has(.menubutton > input:checked) .container-left {
width: 10rem;
}
/* just style the right box for visibility */
.container-right {
border: 1px solid lightgray;
height: 50vh;
flex-grow: 1;
padding: 0.5rem 0.5rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
<div class='menubutton'><input type='checkbox' id='menubuttoninput'><label for='menubuttoninput'><i class="fa-solid fa-bars not-active"></i><i class="fa-solid fa-xmark active"></i></label></div>
This is a navbar!
</nav>
</div>
<div class='container'>
<div class='container-left'>
Left
</div>
<div class='container-right'>
right
</div>
</div>
If you do need a javascript solution then attach a listener to the checkbox input element and toggle the sidebar class to change the width as below:
window.onload = () => {
document.querySelector('.menubutton input').addEventListener('change', (e) => {
const sidebar = document.querySelector('.container-left');
if (e.target.checked) {
sidebar.classList.add('sidebar-active');
} else {
sidebar.classList.remove('sidebar-active');
}
});
}
/* essential to add this as there's a default 8px margin */
body {
margin: 0;
}
/* this is also essential to avoid a world of width-based pain */
* {
box-sizing: border-box;
}
/* Just making things pretty here */
nav {
display: flex;
width: 100%;
gap: 1rem;
padding: 0.5rem 1rem;
background-color: cornflowerblue;
color: white;
}
/*the menu button is basically a hidden check box, we use label to style it as a button */
.menubutton>input {
display: none;
}
/*these toggles the display of the menu button, it works because the label after the input element */
.menubutton>input:checked+label .not-active {
display: none;
}
.menubutton>input:not(:checked)+label .active {
display: none;
}
.container {
display: flex;
width: 100%;
}
.container-left {
background-color: lightblue;
height: 50vh;
padding: 0.5rem 0.5rem;
border: 1px solid transparent;
width: 3rem;
transition: width 300ms;
}
/* this is the bit that styles the width of the sidebar when the checkbox is checked. We just add this using javascript*/
.sidebar-active {
width: 10rem;
}
/* just style the right box for visibility */
.container-right {
border: 1px solid lightgray;
height: 50vh;
flex-grow: 1;
padding: 0.5rem 0.5rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
<div class='menubutton'><input type='checkbox' id='menubuttoninput'><label for='menubuttoninput'><i class="fa-solid fa-bars not-active"></i><i class="fa-solid fa-xmark active"></i></label></div>
This is a navbar!
</nav>
</div>
<div class='container'>
<div class='container-left'>
Left
</div>
<div class='container-right'>
right
</div>
</div>

How to change the position of the div after file upload?

I want to reposition my browse button when the user uploaded a file. This is the sample of how it should really look before and after uploading the file:
Before:
After:
I change the content of my button "Browse file" to "Replace File"
This is my html code.
<div id="uploadModal" class="upload-modal">
<div class="modal-content">
<h2 style="font-size: 24px;">Choose file</h2>
<p>
Choose the csv file containing the data you want to create a forecast for.
</p>
<div class="browse-file">
<div id="filename"></div>
<input type="file" id="file-upload" multiple required />
<label for="file-upload">Browse file</label>
</div>
<div class="options">
<button class="cancel"><h4>Cancel</h4></button>
<button class="proceed"><h4>Proceed</h4></button>
</div>
</div>
</div>
Here is my CSS
.upload-modal {
display: none;
position: fixed;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 34, 2, 0.3);
}
input[type="file"] {
position: absolute;
opacity: 0;
z-index: -1;
}
input + label {
padding: 10px 24px;
background: #D4E8CF;
border-radius: 100px;
position: static;
width: 119px;
height: 40px;
border: none;
cursor: pointer;
z-index: 1;
}
#filename{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
justify-content: left;
align-items: flex-start;
}
What's happening here is that my button moves according to the length of the file so I added max-width but no luck. Thanks!
EDIT: I added css for upload-modal

I'm not sure you need to use absolute positioning for what you want.
You could set div#upload-modal or div.modal-content to position: relative;
and then position the button element with left: or right: or use float: right;
https://developer.mozilla.org/en-US/docs/Web/CSS/position
https://developer.mozilla.org/en-US/docs/Web/CSS/float

This alternate version uses CSS's Flexbox and JavaScript's Event Listeners.
It probably doesn't do precisely what you want but should come close enough that reading through the comments a few times and playing around with the code should make clear how you can get to where you want to go using just a few lines of JavaScript to grab the file name and show it on the screen.
MDN (linked above) is a great place to get more clarity about any particular front-end feature that you're interested in using. Happy coding!
// Unnamed function runs as soon as the DOM elements are ready
window.addEventListener('DOMContentLoaded', () => {
// Identifies some of the DOM elements
const
filenameSpan = document.getElementById("filename-span"),
fileInput = document.getElementById("file-input"),
chooseBtn = document.getElementById("choose-btn");
// When the input changes (when a file is chosen), calls `updateDisplay`
fileInput.addEventListener("change", updateDisplay);
// Defines `updateDisplay`
function updateDisplay(){
// Puts first fiename in span and "unhides" it
const filename = fileInput.files[0]?.name;
filenameSpan.textContent = filename || "(choose file)";
filenameSpan.classList.remove("hidden");
};
});
*{
margin: 0;
}
#container{
width: 18rem; /* "rem" unit is the base character height */
padding: 2rem;
border-radius: 1.5rem;
background-color: lightgrey;
}
#header{
margin-bottom: 2rem;
}
#chooser{
/* flex w/ space-around makes choose-btn shift right when filename appears */
display: flex;
justify-content: space-around;
margin-bottom: 4rem;
}
#options{
text-align: right;
}
#filename-span{
padding: 1rem 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 6rem;
}
button{ /* the "options" buttons */
border: none;
font-weight: bold;
color: darkgreen;
background-color: lightgrey;
}
#choose-btn{
/* Not a true "button" element -- the "label" for file-input */
padding: 1rem 1.5rem;
background-color: darkseagreen;
border-radius: 2rem;
border: none;
font-weight: bold;
}
.hidden{ /* Uses a class so all styling happens thru CSS */
display: none;
}
<div id="container">
<div id="header">
<h2>Choose file</h2>
<p> Choose the csv file containing the data you want to create a forecast for</p>
</div>
<div id="chooser">
<!-- The span and input elements are initially "hidden" via CSS -->
<span id="filename-span" class="hidden"></span>
<label id="choose-btn">
<!-- input element is inside its stylable & clickable label -->
Browse File
<input id="file-input" type="file" class="hidden" />
</label>
</div>
<div id="options">
<button id="cancel-btn">Cancel</button>
<button id="proceed-btn">Proceed</button>
</div>
</div>

Is there a way to jump from a section into another section with Vanilla JavaScript?

I have two sections one over the other.
What I want to do is that when I click the button, the first section display: none with a small transition and the second one appears. I need to do that with vanilla JavaScript as I'm learning it.
My goal is to be able to create a login when the password is entered, the person is moved to the second section. (this is just for Front end, nothing backend).
Here is the code below:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Login Background */
#first{
position: absolute;
width: 100%;
height: 100vh;
background-color: #464159;
z-index: 1;
}
/* Login */
.login-container{
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -100%);
display: flex;
align-items: center;
justify-content: center;
}
.logo{
justify-content: center;
margin-right: 20px;
}
.logo img{
width: 180px;
height: auto;
}
.user{
display: flex;
flex-direction: column;
}
.w8u{
color: white;
font-size: 15px;
margin: 0 0 10px 0;
}
.submit{
flex: 1;
margin: 30px 0 0 10px;
}
/* Menu */
#second{
position: absolute;
width: 100%;
height: 100vh;
background-color: orangered;
z-index: -1;
}
<body>
<section id="first">
<div class="login-container">
<!-- Logo User -->
<div class="logo">
<img src="w-logo.jpg" alt="User">
</div>
<!-- User Name -->
<div class="user">
<div class="w8u">
<h3>User</h3>
</div>
<div>
<input class="input" type="password" placeholder="Enter your password" required>
</div>
</div>
<!-- Submit Button -->
<button id="btn-submit" class="submit" type="submit" onclick="">GO!</button>
</section>
<section id="second">
</section>
<script src="app.js"></script>
</body>

Yes, you can change CSS of elements using JavaScript:
function login(){
document.getElementById("first").style.display="none";
document.getElementById("second").style.display="block";
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Login Background */
#first{
position: absolute;
width: 100%;
height: 100vh;
background-color: #464159;
z-index: 1;
}
/* Login */
.login-container{
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -100%);
display: flex;
align-items: center;
justify-content: center;
}
.logo{
justify-content: center;
margin-right: 20px;
}
.logo img{
width: 180px;
height: auto;
}
.user{
display: flex;
flex-direction: column;
}
.w8u{
color: white;
font-size: 15px;
margin: 0 0 10px 0;
}
.submit{
flex: 1;
margin: 30px 0 0 10px;
}
/* Menu */
#second{
position: absolute;
width: 100%;
height: 100vh;
background-color: orangered;
z-index: -1;
}
<body>
<section id="first">
<div class="login-container">
<!-- Logo User -->
<div class="logo">
<img src="w-logo.jpg" alt="User">
</div>
<!-- User Name -->
<div class="user">
<div class="w8u">
<h3>User</h3>
</div>
<div>
<input class="input" type="password" placeholder="Enter your password" required>
</div>
</div>
<!-- Submit Button -->
<button id="btn-submit" class="submit" type="submit" onclick="login()">GO!</button>
</section>
<section id="second">
Section 2
</section>
<script>
</script>
</body>

Short Answer:
You can solve your issue by using a common pattern of styling transitions and toggling classes in JavaScript.
/* Get Screen Container */
let context = document.querySelector("main.screen-container");
/* Helper Methods */
// Utility
const ele = context.querySelector.bind(context),
eles = context.querySelectorAll.bind(context);
// Action
const showScreen = inactiveScreen => {
const screens = eles(".screen");
screens.forEach(screen => screen.classList.remove("active-screen"));
inactiveScreen.classList.add("active-screen");
}
// Elements
const login_button = ele("#loginBtn"),
logout_button = ele("#logoutBtn"),
login_screen = ele("#login"),
loggedIn_screen = ele("#loggedIn");
// Add Event Listeners and Handlers
login_button.addEventListener("click", () => showScreen(loggedIn_screen));
logout_button.addEventListener("click", () => showScreen(login_screen));
.full-width-full-height {
width: 100%;
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.inputs-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 200px;
padding: 5px;
border: 5px black solid;
}
.inputs-container.inputs {
padding: 10px;
}
.screen#login {
display: flex;
justify-content: center;
}
.screen#loggedIn {
background: rgba(0,0,0,.5);
border: 5px solid rgba(0,0,0,.3);
text-align: center;
}
highlight {
color: rgb(0,100,0);
text-shadow: 3px 3px 10px rgb(0,200,0);
}
.screen-container {
height: 100%;
width: 100%;
overflow: hidden;
padding: 0px;
margin: 0px;
}
main section {
position: absolute;
height: 0px;
width: 0px;
opacity: 0;
transition: all .3s ease-in-out;
}
main section.active-screen {
height: 100%;
width: 100%;
opacity: 1;
}
<body class="full-width-full-height no-overflow">
<main class="screen-container full-width-full-height">
<section id="login" class="screen active-screen">
<div class="inputs-container">
<div class="inputs"><label>Username:</label><input type="text" id="username" placeholder="admin" /></div>
<div class="inputs"><label>Password:</label><input type="password" id="password" /></div>
<button id="loginBtn">login</button>
</div>
</section>
<section id="loggedIn" class="screen">
<h3>User Successfully <highlight>Logged In</highlight></h3>
<button id="logoutBtn">logout</button>
</section>
</main>
</body>
Explanation of Answer:
In your question you're asking for help in the following:
Using Sections as Different Screens in an Application
Change Screens on an Event such as click
Transition between Screens when the Screen Changes
Something like this isn't an atypical need and, in fact, just looking at the above you can see the resemblance between what you're looking for and common things like a carousel or tab navigation.
Since this is the case there is a pretty common pattern when designing markup based around these types of requirements and this pattern is used in frameworks like BootStrap, DataTables, JQuery, etc.
The Mark-Up Pattern:
Create a Container
Provide a class to define this type of container ( screen-container )
Create Visual Elements
In your case Section Elements dubbed Screens
Provide a class to define these specific elements
In your case something like screen
You will likely also want to provide an ID for each of these Visual Elements based on their Content.
In your case something like login and loggedIn
Create a class that will serve as the active Visual Element
In your case something like active-screen
Incorporating the above you end up with a basic outline:
<main class="screen-container">
<section id="login" class="screen active-screen"></section>
<section id="loggedIn" class="screen"></section>
</main>
Example:
html, body, main, .screen-container {
height: 100%;
width: 100%;
}
.screen-container
.screen {
padding: 3px;
background: rgba(24,24,24, .3);
border: 3px solid black;
width: 100px;
height: 100px;
}
.screen-container
.screen.active-screen {
border-color: green;
}
<main class="screen-container">
<section id="login" class="screen active-screen">login</section>
<section id="loggedIn" class="screen">logged in</section>
</main>
Styling:
In your initial question you say that you want to use the display property to hide and show your screens, however, you also state that you would like to have the screens transition from one to another.
Transitioning is definitely possible through the aptly named CSS transition property ( More info on MDN ).
The problem is that the display property is not able to be animated. If an element is configured to display: none; the page is immediately repainted with that element removed.
This means that you need to use a different property, and we typically would use opacity or visibility. Here are the differences between these three:
display: none;
immediately collapses the element
removes the element from view.
There's no transition allowed.
visibility: hidden;
Does not collapse the element
The space it occupied is blank.
removes the element from view
Transitions are allowed
The element will still pop out of sight.
opacity: 0;
Does not collapse the element
The space it occupied is blank.
removes the element from view
Transitions are allowed.
The element will fade until it is not visible.
Here is an example of the different way these properties affect the layout of the page:
const context = document.querySelector("#examples");
const ele = context.querySelector.bind(context),
hide = section => section.classList.toggle("hide"),
onClickHide = (btn, section) => btn.addEventListener("click", () => hide(section));
opacity = ele(".opacity"),
opacity_button = ele("#oBtn"),
visibility = ele(".visibility"),
visibility_button = ele("#vBtn"),
display = ele(".display"),
display_button = ele("#dBtn"),
toggle_button = ele("#tBtn");
onClickHide(opacity_button, opacity);
onClickHide(visibility_button, visibility);
onClickHide(display_button, display);
toggle_button
.addEventListener("click", function() {
hide(opacity);
hide(visibility);
hide(display);
});
html,
body,
#examples {
width: 100%;
height: 100%;
box-sizing: content-box;
margin: 0px;
padding: 0px;
}
#examples section {
display: flex;
flex-direction: column;
width: 100px;
height: 100px;
border: 5px solid black;
margin: 5px;
transition: all .5s ease-in-out;
}
#examples section.hide {
border-radius: 100px;
}
#examples section.opacity {
background-color: blue;
color: white;
}
#examples section.opacity.hide {
opacity: 0;
}
#examples section.visibility {
background-color: purple;
color: white;
}
#examples section.visibility.hide {
visibility: hidden;
}
#examples section.display {
display: block;
background-color: red;
color: white;
}
#examples section.display.hide {
color: black;
display: none;
}
<main id="examples">
<section class="opacity">opacity <button id="oBtn">hide</button></section>
<hr />
<section class="visibility">visibility <button id="vBtn">hide</button></section>
<hr />
<section class="display">display <button id="dBtn">hide</button></section>
<hr/>
<button id="tBtn">Toggle All</button>
</main>
Note: In the above there are actually two properties transitioning - opacity, visibility, or display - and border-radius. You should notice firstly how in the display example the border-radius change isn't seen at all, and secondly how the display example is the only one that collapses the element so that it no longer takes up space.
Applying Transitions:
By combining opacity: 0; with height: 0px; width: 0px; we can remove the element visually from the page while also removing any impact it has on other elements - meaning that it won't take up space and is transitionable.
setInterval(function() {
const screens = [
document.querySelector(".screen.active-screen"),
document.querySelector(".screen:not(.active-screen)")
];
screens[0].classList.toggle("active-screen");
screens[0].ontransitionend = () => {
screens[1].classList.toggle("active-screen");
screens[0].ontransitionend = undefined;
}
}, 1000)
html,
body,
main,
.screen-container {
height: 100%;
width: 100%;
}
.screen-container .screen {
transition: all .3s ease-in-out;
opacity: 0;
height: 0px;
width: 0px;
}
.screen-container .screen.active-screen {
background: rgba(24, 24, 24, .3);
border: 3px solid black;
padding: 3px;
border-color: green;
width: 100px;
height: 100px;
opacity: 1;
}
<main class="screen-container">
<section id="login" class="screen active-screen">login</section>
<section id="loggedIn" class="screen">logged in</section>
</main>
JavaScript
The final piece of the puzzle is the JavaScript mechanics of the Screens.
Any Programmer wants to make the switch as easy as possible, and this is done typically by providing a function that allows for quick reassignment of the class active-screen by removing it from the current active screen and applying it to the desired visual element.
One thing to take into account is that you want your queries for elements to be as specific as possible. Meaning that instead of document.querySelector you want to provide the smallest context of where to find your Visual Elements. a.e.
/* Get Screen Container */
let context = document.querySelector("main.screen-container");
/* Helper Methods */
// Utility
const ele = context.querySelector.bind(context),
eles = context.querySelectorAll.bind(context);
This prevents code collision where other code in your Application's JavaScript, Styling, or Mark-Up may utilize a screen or active-screen class that isn't relevant to what you're doing here.
Note: This is actually a problem in BootStrap currently. It searches for the active class in it's Tab architecture. This is such a generic class name that other libraries utilize it and it can cause a giant headache to get things to work properly. Writing explicit patching because you didn't think through your design fully is something I'd just as soon spare you from, so try to keep interactivity with other code in mind.
Lastly we write our function ( showScreen ) that allow for quick, easy switching between screens:
// Action
const showScreen = inactiveScreen => {
const screens = eles(".screen");
screens.forEach(screen => screen.classList.remove("active-screen"));
inactiveScreen.classList.add("active-screen");
}
And believe it or not, that's pretty much it!
All that's left to do is apply this functionality to your button click events and it works just as it should:
Result:
/* Get Screen Container */
let context = document.querySelector("main.screen-container");
/* Helper Methods */
// Utility
const ele = context.querySelector.bind(context),
eles = context.querySelectorAll.bind(context);
// Action
const showScreen = inactiveScreen => {
const screens = eles(".screen");
screens.forEach(screen => screen.classList.remove("active-screen"));
inactiveScreen.classList.add("active-screen");
}
// Elements
const login_button = ele("#loginBtn"),
logout_button = ele("#logoutBtn"),
login_screen = ele("#login"),
loggedIn_screen = ele("#loggedIn");
// Add Event Listeners and Handlers
login_button.addEventListener("click", () => showScreen(loggedIn_screen));
logout_button.addEventListener("click", () => showScreen(login_screen));
.full-width-full-height {
width: 100%;
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.inputs-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 200px;
padding: 5px;
border: 5px black solid;
}
.inputs-container.inputs {
padding: 10px;
}
.screen#login {
display: flex;
justify-content: center;
}
.screen#loggedIn {
background: rgba(0,0,0,.5);
border: 5px solid rgba(0,0,0,.3);
text-align: center;
}
highlight {
color: rgb(0,100,0);
text-shadow: 3px 3px 10px rgb(0,200,0);
}
.screen-container {
height: 100%;
width: 100%;
overflow: hidden;
padding: 0px;
margin: 0px;
}
main section {
position: absolute;
height: 0px;
width: 0px;
opacity: 0;
transition: all .3s ease-in-out;
}
main section.active-screen {
height: 100%;
width: 100%;
opacity: 1;
}
<body class="full-width-full-height no-overflow">
<main class="screen-container full-width-full-height">
<section id="login" class="screen active-screen">
<div class="inputs-container">
<div class="inputs"><label>Username:</label><input type="text" id="username" placeholder="admin" /></div>
<div class="inputs"><label>Password:</label><input type="password" id="password" /></div>
<button id="loginBtn">login</button>
</div>
</section>
<section id="loggedIn" class="screen">
<h3>User Successfully <highlight>Logged In</highlight></h3>
<button id="logoutBtn">logout</button>
</section>
</main>
</body>
Conclusion:
I hope this helps and gives you some insight into how this pattern is used! It's not a difficult thing to learn, but it's incredibly useful!
Good luck and Happy Coding!

Dropdown menu - z-index stacking issue

My team and I are having trouble stacking a Dropdown component on our page. Essentially, we want the Dropdown to slide down underneath the top-nav when the button is clicked, but as it slides down, it should be positioned above everything else: the sub-nav and the content below.
Currently, the Dropdown is positioned as absolute and the animation is performed with a transform: translateY(). We've tried positioning the elements outside of it as relative (the outer <ul>, <nav>, and <div id="top-nav"> elements that are bolded) with a higher z-index to ensure the dropdown stays below it, but so far it hasn't worked.
We're also not able to modify any of the CSS or structure of the div#content below, but we do have flexibility as to where we can place the Dropdown structurally in the #header.
EDIT: Tried my best to recreate the scenario with JSFiddle here: https://jsfiddle.net/4zaas4sq/
Here's roughly what our markdown looks like:
<body>
<div id="header">
<div>
**<div id="top-nav">**
<div>
**<nav>**
<ul></ul>
**<ul>**
<li>
<DROPDOWN>
<button onClick={toggleDropdown}>Log In</button>
<div className={(this.state.show && 'show})>
<ul></ul>
</div>
...
</DROPDOWN>
</li>
<li></li>
</ul>
</nav>
</div>
</div>
<div id="sub-nav">
...
</div>
</div>
</div>
<div id="content">
</div>
</body>
Here's a wireframe depicting the final state of the dropdown.
Any help or suggestions would be appreciated!

I used max-height property.I didn't change a lot of things in your code.In JS code you will see main changes.Let me know if this solution is what you want.Thanks :)
In html code add class="hideItem" in the divider with id="dropdown" like this:
<div id="dropdown" class="hideItem">
JS code
$(document).ready(function() {
$('#dropdown-button').click(function() {
if( $("#dropdown").hasClass( 'hideItem' )){
$( "#dropdown" ).css( 'max-height' , '100%' );
$("#dropdown").removeClass( 'hideItem' );
$("#dropdown").addClass( 'showItem' );
}else{
$( "#dropdown" ).css( 'max-height' , '0' );
$("#dropdown").addClass( 'hideItem' );
$("#dropdown").removeClass( 'showItem' );
}
});
});
css code
html, body {
height: 100%;
}
#top-nav {
background-color: mediumpurple;
width: 100%;
}
.nav {
display: flex;
justify-content: space-between;
}
.inner-left-nav {
list-style: none;
display: flex;
}
.inner-left-nav li {
padding: 5px;
border: 1px solid black;
}
.inner-right-nav {
display: flex;
list-style: none;
margin: 0;
}
.inner-right-nav li {
align-items: center;
padding: 0 5px;
}
.dropdown-container {
display: flex;
align-items: center;
height: 100%;
}
#dropdown {
position: absolute;
top: 70px;
right: 100px;
max-height: 0;
overflow-y: hidden;
transition: max-height 1s ease-in-out;
background-color: mediumseagreen;
}
#dropdown.show {
visibility: visible;
transform: translateY(0%);
transition: visibility 0s, transform 0.3s;
}
#dropdown-button {
border: 1px solid black;
background: transparent;
padding: 0 20px;
cursor: pointer;
}
.dropdown-list {
padding: 0;
list-style: none;
}
#sub-nav {
display: flex;
justify-content: space-between;
background-color: grey;
}
#content {
background-color: azure;
width: 100%;
height: 100%;
}

Apply click method to outer div but not inner div [duplicate]

This question already has answers here:
How do I prevent a parent's onclick event from firing when a child anchor is clicked?
(25 answers)
Closed 5 years ago.
In this example I want the alert to be triggered when the black outer div is clicked but not when anything inside the inner div is clicked.
Currently when I click the inner button it triggers the alert.
$("#outer").click(function() {
alert("triggered");
});
#outer{
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
}
#inner{
background-color: #fff;
width: 300px;
height: 300px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
<div id="inner">
<button>inner button</button>
</div>
</div>
I want inside the inner div nothing to trigger the alert. How do i do this?
(for some reason inner button isn't showing in snippet, here is codepen link: https://codepen.io/GuerrillaCoder/pen/Pmvmqx)

You just need to check for id of element, as inner is child element, it will always propagate the event to parent element (outer).
$("#outer").click(function(event) {
if(event.target.id=="outer"){
alert("triggered");
}
});

You can use event.stopPropagation(); when clicking the inner div:
$("#outer").click(function() {
alert("triggered");
});
$('#inner').click(function (evt) {
evt.stopPropagation();
});
#outer{
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
}
#inner{
background-color: #fff;
width: 300px;
height: 300px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
<div id="inner">
<button>inner button</button>
</div>
</div>

In the click function check event target equal to outer
$("#outer").click(function(e) {
if (e.target.id === "outer"){
alert("triggered");
}
});

I think event.stopPropagation() method would be most useful solution.you only need to call it on the children of outer div:
$("#outer").on('click', function () {
alert("triggered");
}).children().on('click', function (e) {
e.stopPropagation();
});
Also check this Solution.

Pure javascript solution, if anyone cares -))
var inner = document.getElementById("inner");
var btn = inner.querySelector("button");
document.getElementById("outer").addEventListener("click", function(e) {
(e.target == btn) || (e.target == inner) ? console.log("click triggered from"+ e.target+". so we do not alert anything") : alert("something");
});
#outer{
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
}
#inner{
background-color: #fff;
width: 300px;
height: 300px;
text-align: center;
}
<div id="outer">
<div id="inner">
<button>inner button</button>
</div>
</div>

Another way to do this:
$("#outer").click(function() {
alert("triggered");
});
$("#inner").click(function(e) {
e.stopPropagation()
});
#outer{
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
}
#inner{
background-color: #fff;
width: 300px;
height: 300px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
<div id="inner">
<button>inner button</button>
</div>
</div>

You can use event.target to check event if is triggered by parent or by its children:
$("#outer").click(function(e) {
if( e.target !== this ) {
return;
} else {
alert("triggered");
}
});

Try this
$("#outer").click(function(e) {
e.target.id=='outer'?alert('triggered'):void(0);
});