Develop Reference

How would I create a div container with three divs in a row where the divs on both sides expand away from the center when an event is triggered?

I want to create a div that has three nested divs touching each other in a row. I want the div at the center of this container to have a constant width. While I want the left div's width to expand to the left(i.e. not pushing the other two divs in the container to the right) on hover and stay expanded on click. I want the same thing to happen to right div's width except it expands to the right. All the nested divs would have content in them some of the content not completely visible until the div expands.
This would be the general idea:
When Neither is Hovered -->
enter image description here
When One Is Hovered -->
enter image description here
When They Are Both Clicked -->
enter image description here
The problem is I haven't been able to figure out a way to do this or find out if there is a tutorial or something that would be helpful in accomplishing this. I have tried googling how to create this, and in all honesty was not to sure exactly what to search up but nothing has really helped me get both divs expanding the way I want. I would appreciate any help in finding a tutorial or any implementation that might work.
So far I have been able to get this far in terms of coding it in HTML and CSS, but have been stuck for a while with no attempt being closer than this. I would need this to be on top of other elements on a page in my webpage hence the z-index, and positioning is so that I could move it to my desired place on the webpage. I am able to get the right div to expand how I want easily as that is the default behavior but when I try to get the left div and right div to both expand I have been stuck. I have gotten the left div to expand at one point but that led to the right div not working. So right now this is the closest I have gotten both expand properly but the left div is under the center div instead of beside it.
I added a bit of a yellow background in the images to give an idea of positioning
Result on Webpage No Hover -->
enter image description here
Result on Webpage On Hover Of Left Div-->
enter image description here
Result on Webpage On Hover Of Right Div-->
enter image description here
HTML-->
<div class="sliding-window">
<div class="left-wing">
</div>
<div class="middle-box">
<h3>Content</h3>
</div>
<div class="right-wing">
</div>
</div>
CSS-->
.sliding-window{
display: flex;
flex-direction: row;
/* justify-content: center; */
z-index: 25;
position: absolute;
top: 30%;
left: 35%;
width: 850px;
}
.middle-box{
left: 250px;
border: 1px red solid;
text-align: center;
height: 300px;
width: 250px;
border-radius: 10%;
background-color: grey;
}
.left-wing{
border: 1px violet solid;
height: 250px;
/* float: left; */
position: relative;
float: left;
left:200px;
margin-top: 25px;
margin-bottom: 25px;
width: 50px;
background-color: grey;
}
.right-wing{
left:450px;
border: 1px green solid;
height: 250px;
margin-top: 25px;
margin-bottom: 25px;
width: 50px;
background-color: grey;
}
.right-wing:hover{
width: 200px;
}
.left-wing:hover{
width: 200px;
/* margin-left: -200px; */
}

Sliding Menu in React

I want to create a file separator styled menu in react. I'm not very familiar with css, so i need a starting point. I have found many such menu components but all of them are full page.
I dont understand how to create the shape of the component, if it were a simple rectangle it would be possible, but the shape is the rectangle plus the button, i dont know how to manage that.
It will look something like this :
Alter clicking on "Filter Menu", it will slide into view:

Try like this
.menu-container {
display: inline-block;
position: fixed;
top: 30%;
left: 0;
}
.menu-body {
display: inline-block;
height: 200px;
width: 100px;
border: 1px solid black;
}
.activate-button {
display: inline-block;
height: 50px;
width: 20px;
border: 1px solid black;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
vertical-align: top;
}
<div>
<div class="menu-container">
<div class="menu-body">
</div>
<div class="activate-button">
</div>
</div>
<div>

That is actually a CSS/HTML only question.
However, to develop from scratch:
Draw a two column table and have the button in the second field
Or
Use Div containers and style them accordingly
Side Note:
Usually you'd use something like bootstrap or even ant.design.
There you have ready to use table components with possibility to filter (at least with ant.design) and for the filter seection popup you could use stuff like the modal component.

Scrolling fixed header displays farther down then desired

I am having some difficulties with a scrolling fixed header I am creating. I found a good example of it on here and now I am trying to make it work with my changes to it and I am trying to adapt it.
I put additional divs than what were in the example and now whenever I scroll past the yellow bar, the red bar(my header) displays way lower than I want.
I created a fiddle to show what it is doing.
https://jsfiddle.net/zoue6gv7/
This worked until I added my top margin to my div id join_login. It now is that far away from the top.
#join_login {
position: absolute;
right: 15%;
top: 27px;
font-size: 1em;
color: #383838;
}
How can I get this header to stay fixed at the top after I get to my scroll point?

Is this what you want? https://jsfiddle.net/zoue6gv7/1/
I just removed the margin-top -50px and replaced it with
top: 0;

This should do the trick! You can just eliminate the space above #logo by adding margin-top: -15px
#logo {
position: absolute;
left: 15%;
top: 22px;
font-size: 2em;
margin-top: -15px;
}

Just kidding! I think I misunderstood what you're trying to do, if you want the red Header to stick to the top of the page even when you scroll down:
Use position: fixed; to tell the header to stay in the same location regardless of scrolling
Use top: 0px; to tell the header, that the location you'd like it to be fixed to is the very top of the page
header {
position: fixed;
top: 0px;
width: 100%;
height: 75px;
background: red;
z-index: 100;
border-bottom: 1px solid #888888;
}

tooltip data to show on right top of tooltip icon

I have a requirement where i have multiple tables in a page and when i mouse over on one column it has to show tooltip at the top position with some data in it. Issue is tooltip is showing on the top of the page but at some random position.
Please suggest. Thanks in advance.

Try to change CSS to:
a.tooltip:hover span {
position: absolute;
bottom: 10px;
display: block;
width: 240px;
color: white;
border: 0px solid black;
padding: 5px;
}
See updated jsFiddle -> http://jsfiddle.net/Afa3f/3/

Span Text Hidden by Animated DIV Despite z-index

I'm working on a hobby project of mine -- it's something of a glorified RSS feed reader/grabber. I've been able to get most things working, but for some reason I cannot get the text in a certain span to be drawn above an animated div.
When a feed is grabbed, certain operations are performed before displaying the results. During this time, I keep track of the progress and display them in an animated "progress bar" div. All of the sub-operations each have their own progress bars, and they all work correctly (text on top of bar), but the final progress bar (overall progress) does not layer the text correctly.
I created a simple mock-up in JSFiddle to give an example of my problem.
$('#progress-total-box').bind('click', draw);
function draw() {
if (($('#progress-totalbar-fill').css('width')) == "0px") {
$('#progress-total-box').unbind();
$('#progress-totalbar-fill').animate({width: '100%'}, 2000, function() {
var description = document.createElement('span');
$(description).attr('id', '#progress-total-text');
$(description).html('100%');
$('#progress-totalbar-empty').append(description);
$('#progress-total-box').bind('click', draw);
});
}
else {
$('#progress-total-box').unbind();
$('#progress-totalbar-fill').animate({width: 0}, 2000, function() {
document.getElementById('progress-totalbar-empty').innerHTML = '';
$('#progress-total-box').bind('click', draw);
});
}
}
The style/position/etc is purely for sake of demonstration. In this example, when the grey loading bar div is clicked, it animates its width from 0% to 100% (or vice-versa). When the animation is complete, a new child span is created and appended to the 'empty bar' background div, wherein the total percentage is displayed (100%, in this case).
This span element is intentionally removed when the bar is reset.
Do you guys have any ideas as to what's going wrong, and how I can fix it?
I have encountered this error is present in both Chrome and Firefox.
Thanks in advance!

There are multiple problems here.
First off, you need to remove the # from this line
$(description).attr('id', 'progress-total-text');
The new span, was never getting the css it was supposed.
Second, you need to either change your markup or your css.
In this case, I updated the CSS, but the id name don't make sense anymore
body {
width: 100%;
height: 125px;
margin: 0;
}
#progress-category-box {
position: relative;
width: 100%;
height: 100%;
font-size: 0;
background-color: red;
}
#progress-total-box {
position: relative;
width: 100%;
height: 40px;
top: 32.5%;
float: right;
text-align: center;
background-color: #515A5C;
}
#progress-totalbar-empty {
position: relative;
width: 100%;
height: 100%;
border: 1px solid #97b0b1;
background-color: transparent;
z-index: 3;
}
#progress-totalbar-fill {
position: relative;
width: 0%;
height: 100%;
top: -42px;
border-left: 1px solid #97b0b1;
border-top: 1px solid #97b0b1;
border-bottom: 1px solid #97b0b1;
background-color: #00FF00;
z-index: 2;
}
#progress-total-text {
position: relative;
color: black;
top: 30%;
font-size: 15px;
z-index: 3;
}
Thing is, you were showing the animated div over the text.
So I put the text over the animation and put a transparent background behind it.
I applied the grey background to the container instead. I also changed it's height and applied height:100% to it's children.
Here's a full fiddle