We Keep Coding

how to the make animation happen at the same time?

Hi I have created a collapsable sidebar the expanding animation works fine I mean as you can see when you expand the sidebar it goes smoothly but the problem comes when I am collapsing the sidebar like first the dark blue chevron comes and sticks to the left side and then the sidebar collapses with a jerk.
So can anyone tell me why its happening? and how can I correct it make the sidebar and the icon go at the same time.
Help is highly appreciated!
let expandIcon = document.querySelector('.epnd-clpse-icon')
expandIcon.addEventListener('click', function() {
$('.sidebar-container').toggleClass('sidebar-container-clpse')
$('.epnd-clpse-icon').toggleClass('epnd-clpse-icon-trn')
console.log("I am clicked")
})
.sidebar-container {
background: #ccc;
}
.epnd-clpse-icon {
background: white;
color: white;
}
a {
text-decoration: none;
}
.sidebar-icon i {
color: #06d6a0;
width: 30px;
}
ul {
padding-left: 0;
}
.sidebar-container {
width: 100%;
max-width: 15%;
min-width: 250px;
transition: all 0.5s linear;
position: relative;
border-left: 20px solid var(--primary-light);
overflow-x: hidden;
}
.sidebar-container-clpse {
min-width: 80px !important;
width: 80px !important;
overflow-x: hidden;
transition: all 0.5s linear;
}
.epnd-clpse-icon {
position: absolute;
/* bottom: 100px;
left: 10px; */
top: 50%;
right: -10px;
transition: all 0.5s linear;
cursor: pointer;
background-color: #001846;
padding: 0.8rem;
border-radius: 10px;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.epnd-clpse-icon-trn {
/* transform: rotateY(180deg); */
transition: all 0.5s linear;
left: 0px;
}
.sidebar .nav-link {
display: flex !important;
padding: 0.6rem 1rem;
align-items: center;
}
.sidebar ul li {
position: relative;
width: 100%;
list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="sidebar-container bg-primary-ex-lgt">
<div class="sidebar min-100-vh py-5 d-flex flex-column justify-content-between">
<ul class="dash-links-icon">
<div class="dash-res-close-icon px-2 mb-5">
<i class="fa-solid fa-chevron-right"></i>
</div>
<li class="links-icon my-2 <?php if($page=='home'){echo 'sdbr-active';}?>">
<a class="nav-link" href="user-dashboard.php">
<span class="sidebar-icon">
<i class="fa-solid fa-house"></i>
</span>
<span class="sidebar-text">Dashboard</span>
</a>
</li>
<li class="links-icon my-2 <?php if($page=='quiz'){echo 'sdbr-active';}?>">
<a class="nav-link" href="quiz.php">
<span class="sidebar-icon">
<i class="fa-solid fa-lightbulb"></i>
</span>
<span class="sidebar-text">Quiz</span>
</a>
</li>
<li class="links-icon my-2">
<a class="nav-link" href="#">
<span class="sidebar-icon">
<i class="fa-solid fa-book"></i>
</span>
<span class="sidebar-text">Blog</span>
</a>
</li>
</ul>
<div class="epnd-clpse-icon">
<i class="fa-solid fa-chevron-right"></i>
</div>
</div>
</div>

In your JavaScript you add the class epnd-clpse-icon-trn. Which adds a left:0px;
.epnd-clpse-icon-trn{
/* transform: rotateY(180deg); */
transition: all 0.5s linear;
left: 0px;
}
Because the original element does not have a left: property, CSS cannot compute a transition of the value and thus will 'pop' the element to the left.
How to fix:
To fix this, you'll have to either position the original element by using left: so CSS can calculate it's position transition.
Alternatively, position the element position:absolute within it's parent element. This way, if you move the parent, the element will shift accordingly. In your code, you've already done this, so changing the CSS related to .epnd-clpse-icon-trn would be sufficient:
.epnd-clpse-icon-trn {
/* transform: rotateY(180deg); */
// transition: all 0.5s linear;
// left: 0px;
}
Ironically, by removing the styling related to .epnd-clpse-icon-trn, you'll do exactly what you're trying to manifest.

Span text pushes other elements (buttons) to the right and left

I am trying to create an voting system for my website but am currently struggling with upvote and downvote counters styling. Here is how it looks right now:
As you can see, the problem is that whenever the number on the right or left side of the buttons gets large, it pushes other elements. I want the two buttons to stay in the center and the upvote counter to grow to the left, and downvote to the right. This way, everything will be centered.
Here is my current CSS code:
.upvoteButtonsContainer{
display: flex;
justify-content: center;
margin-top: 15px;
}
.upvoteButton{
margin-right: 2px;
border: none;
background-color: transparent;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
border-radius: 5px;
font-size: 25px;
}
.downvoteButton{
margin-left: 2px;
border: none;
background-color: transparent;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
border-radius: 5px;
font-size: 25px;
}
.upvoteCounterContainer{
display: block;
direction: rtl;
text-align: right;
}
.downvoteCounterContainer{
display: block;
direction: ltr;
text-align: left;
}
.upvoteCounter{
margin-right: 5px;
}
.downvoteCounter{
margin-left: 5px;
}
And my HTML code:
<div className="homePage">
{imageLists.map((image) => {
return (
<div className="container">
<div className="meme">
<img src={image} className="meme-img"></img>
</div>
<div className="upvoteButtonsContainer">
<div className="upvoteCounterContainer">
<span className="upvoteCounter">120</span>
</div>
<button type="button" className="upvoteButton">
👍
</button>
<button type="button" className="downvoteButton">
👎
</button>
<div className="downvoteCounterContainer">
<span className="downvoteCounter">1241123123310</span>
</div>
</div>
</div>
);
})}
</div>
Thank you!

If you always want the buttons to be center and dont care about the numbers breaking into new lines for exceptionally large numbers, you can solve this by position: absolute quite easily:
.upvoteButton{
position: relative;
}
.downvoteButton{
position: relative;
}
.upvoteCounterContainer{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: calc(100% + 5px);
}
.downvoteCounterContainer{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: calc(100% + 5px);
}
And then wrapping the counters inside the buttons:
<div className="upvoteButtonsContainer">
<button type="button" className="upvoteButton">
👍
<div className="upvoteCounterContainer">
<span className="upvoteCounter">120</span>
</div>
</button>
<button type="button" className="downvoteButton">
👎
<div className="downvoteCounterContainer">
<span className="downvoteCounter">1241123123310</span>
</div>
</button>
</div>
Extra changes:
You can remove all text align/direction styles
If this doesnt work properly you can try putting the icons in specific containers (Divs/spans)
If the counters dont get an auto width (their width doesnt grow based on their content) you can calculate and give them a fixed value.

How to make link clickable when using z-index without turning all other elements z-index negative?

I'm trying to make a drop-down box with a button and a toolbar so that my drop-down will be behind the toolbar but in front of my main element. The problem is that to do this I use z-index with negative value because using positive value on the toolbar will cause it to get behind my drop-box due to positioning and hierarchy.
I know that if I'll go and change the z-index of elements in my DOM to smaller negative values (as suggested here) it will make my links clickable again, but this seems to be a very inefficient way of solving the issue. Plus, I'd rather not mess with the toolbar and break it different elements for each button as this can cause a lot of issues with responsiveness in the future. Please take a look at the JFiddler link below.
Here is my code:
$('#btn2').on('click', function() {
console.log('Click!');
var element = document.getElementById("sub-memu");
element.classList.toggle("show");
})
body {
background-color: gray;
height: 100vh;
padding: 0px;
margin: 0px;
}
.toolbar {
height: 40px;
background-image: linear-gradient(white, red);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.35);
position: relative;
}
.buttons {
display: flex;
flex-direction: row;
}
button {
margin-right: 5px;
}
#sub-memu {
position: absolute;
display: flex;
flex-direction: column;
background-color: white;
padding: 10px;
min-width: 100px;
z-index: -1;
transform: translate(0px, -140%);
transition: transform 1s;
}
main {
padding: 10px;
margin: 10px;
background-color: yellow;
height: calc(100% - 40px - 20px - 20px);
position: relative;
z-index: -2;
}
.show {
transform: translate(0px, 25px) !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class='toolbar'>
<div class='buttons'>
<button id='btn1'>
Button 1
</button>
<div class='btn-wrapper'>
<button id='btn2'>
Button 2
</button>
<div id='sub-memu' class='subMenu'>
<a href='#'>Can you click me?</a>
<a href='#'>Can you click me?</a>
<a href='#'>Can you click me?</a>
<a href='#'>Can you click me?</a>
</div>
</div>
</div>
</div>
<main>
This is my main element.
You should be able to click me.
</main>
</body>
https://jsfiddle.net/atb8yq6e/1/
What I'm trying to achieve is the same behavior as can bee seen in my JSFiddle link (drop-down box lowering from behind the navigation bar but in front of my main content) but with active links, without going through my DOM tree and changing every overlapping element's z-index to lower number.
Thank you all in advance,
Lior.

Add z-index to body element to make sure you create a stacking context and avoid having the element going behind it:
$('#btn2').on('click', function() {
console.log('Click!');
var element = document.getElementById("sub-memu");
element.classList.toggle("show");
})
body {
background-color: gray;
height: 100vh;
padding: 0px;
margin: 0px;
position:relative;
z-index: 0;
}
.toolbar {
height: 40px;
background-image: linear-gradient(white, red);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.35);
position: relative;
}
.buttons {
display: flex;
flex-direction: row;
}
button {
margin-right: 5px;
}
#sub-memu {
position: absolute;
display: flex;
flex-direction: column;
background-color: white;
padding: 10px;
min-width: 100px;
z-index: -1;
transform: translate(0px, -140%);
transition: transform 1s;
}
main {
padding: 10px;
margin: 10px;
background-color: yellow;
height: calc(100% - 40px - 20px - 20px);
position: relative;
z-index: -2;
}
.show {
transform: translate(0px, 25px) !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class='toolbar'>
<div class='buttons'>
<button id='btn1'>
Button 1
</button>
<div class='btn-wrapper'>
<button id='btn2'>
Button 2
</button>
<div id='sub-memu' class='subMenu'>
<a href='#'>Can you click me?</a>
<a href='#'>Can you click me?</a>
<a href='#'>Can you click me?</a>
<a href='#'>Can you click me?</a>
</div>
</div>
</div>
</div>
<main>
This is my main element.
You should be able to click me.
</main>
</body>
Related: Why can't an element with a z-index value cover its child?

add this codes to your css:
html{
pointer-events:none;
}
body *{
pointer-events:initial;
}
body {
background-color: gray;
height: 100vh;
padding: 0px;
margin: 0px;
pointer-events:none;
}
https://jsfiddle.net/hL32e6cz/

Simply set z-index to 1 instead on your #sub-memu (should probably be menu?), and remove the z-index value on main.

Dropdown menu not stretching vertically

I want to stretch the sidebar vertically when the dropdown is clicked. The height of the sidebar is 100%, so if I click the link or the a tag, the sidebar should stretch.
However, if I click the sidebar the container and the sidebar stays at 100% height and the dropdown goes past the end of the menu.
In the picture there are 4 links as an example, but in the code below I've only added 1 link.
The first image: This is when the links or the a tag is not been click
The second image: This is when the links are already clicked and the sidebar and container does not stretch.
<body>
<!-- SIDERBAR -->
<div class="container">
<div class="sidebar">
<img src="images/1232.png" class="logo">
<h1 class="h1-1">Pacific Sky</h1>
<h1 class="hr-1">___________________________</h1>
<img src="images/sampleimg.png" class="dp">
<p class="welcomemessage">Welcome, <p class="adminname">Dave Spencer</p>
<div class="links">
<br>
<h5 style="color: white; font-size: 2vh;"> GENERAL</h5><br>
<!-- Links -->
<script type="text/javascript" src="js/showhide.js"></script>
<!-- links palatandaan -->
<div class="dashboard" id="dashboard">
<p class="dashboard-color">
<i class="fa fa-podcast" aria-hidden="true" id="dashboardlogo"></i>
DASHBOARD
<i class="fa fa-caret-down okay" aria-hidden="true" id="downlogo"></i></p>
<i class="fa fa-dot-circle-o" aria-hidden="true" id="bullet"></i> Messages
<i class="fa fa-dot-circle-o" aria-hidden="true" id="bullet"></i> Pending Reservation
<i class="fa fa-dot-circle-o" aria-hidden="true" id="bullet"></i> Approved Reservation
</div><br>
</div>
</div>
// showhide
$(document).ready(function(){
$(".dashboard").click(function(){
$("a").slideToggle(400);
});
});
*
{
padding: 0;
margin: 0;
}
body
{
width: 100%;
width: 100%;
font-family: 'Alegreya Sans';
}
a
{
color: white;
text-decoration: none;
display: none;
font-family: RobotoT;
}
.container
{
background: linear-gradient(to left bottom, #ccccff 0%, #ffffff 100%);
position: relative;
width: 100%;
height: 100%;
}
.sidebar
{
width: 50vh;
height: 100vh;
position: relative;
background-color: #2A3F54;
}
//and this is the links
.links
{
position: relative;
top: 33%;
color: #e5e6e8;
}
.dashboardlinks
{
font-size: 2.5vh;
line-height: 250%;
text-align: left;
color: #e8eaef;
position: relative;
top: 1vh;
padding-left: 14%;
}
#downlogo
{
position: absolute;
right: 8%;
}

Probably just need to change width to height: (and I'd add html)
body
{
width: 100%;
width: 100%;
font-family: 'Alegreya Sans';
}
to
html, body
{
width: 100%;
height: 100%;
font-family: 'Alegreya Sans';
}

Update .sidebar to this
.sidebar
{
width: 50vh;
min-height: 100vh;
position: relative;
background-color: #2A3F54;
}
https://jsfiddle.net/pmuhnhfo/
I just copy pasted more items in fiddle to make it show the issue
The height 100vh before is restricting it and since you want it to stretch the whole way, just set minimum height
On a side note, you should change
<p class="welcomemessage">Welcome, <p class="adminname">Dave Spencer</p>
to
<p class="welcomemessage">Welcome, <span class="adminname">Dave Spencer</span></p>
I think you originally you had a p tag inside of another p tag

Javascript & CSS - how to make z-index responsive on user action

I have two divs with text in them. One is static i.e. no action on user's part changes anything in the div, the other div is transparent, however, the text shadow moves as per the user's actions.
Even though I have mentioned z-index in CSS, it doesn't seem to be implemented by the browser. In this case, the div 'introText' needs to be on top of the div 'introTextShadow'.
HTML:
<div id="textQuote">
<div id="introTextShadow">
<span id="textshadow01" class="cTextShadow">This</span>
<span id="textshadow02" class="cTextShadow">world</span>
<span id="textshadow03" class="cTextShadow">rocks</span>
<span id="textshadow04" class="cTextShadow">big</span>
<span id="textshadow05" class="cTextShadow">time</span>
</div>
<div id="introText">
<span id="text01" class="cTextFloat">This</span>
<span id="text02" class="cTextFloat">world</span>
<span id="text03" class="cTextFloat">rocks</span>
<span id="text04" class="cTextFloat">big</span>
<span id="text05" class="cTextFloat">time</span>
</div>
</div>
CSS:
#introText {
position: absolute;
top: 200px;
left: 20px;
width: 300px;
height: 50px;
word-spacing: 0;
font-size: 16px;
font-weight: 900;
color: rgb(100,100,100);
text-shadow: 1px 1px 1px rgb(1,1,1),
-1px -1px 1px rgb(199,199,199);
opacity: 1;
z-index: 100;
}
#introTextShadow {
position: absolute;
top: 200px;
left: 20px;
width: 300px;
height: 50px;
word-spacing: 0;
color: rgb(21,21,21);
font-weight: 900;
z-index: 0;
}
Here is the JS fiddle