We Keep Coding

How to make smooth opening dropdown with basic javascript code?

How can I make the red backgrounded "Content" area open smoothly from top to bottom when click to "Clicker" with this piece of code? And extra question is, how can I add more Clickers in the same Html with the same javascript code? If I duplicate these, only one is working.
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
.accordion {
position: relative;
width: 100%;
height: auto;
background:red;
}.grider{
display: block;
width: 100%;
background: #fff;
}
#myLinks {
display:none;
}
.content {
height:50px;}
<div class="accordion">
<a href="javascript:void(0);" onclick="myFunction()" class="grider clearfix toggle">
<span>Clicker</span>
</a>
<div class="content clearfix" id="myLinks">Content</div>
</div>

You don't need Javascript for all animations. Why don't you try with CSS?
const btns = document.querySelectorAll('.btn-dropdown')
btns.forEach(btn => {
btn.addEventListener('click', function(e) {
e.target.classList.toggle('open')
})
})
html,
body {
margin: 0;
font-family: Arial;
}
nav {
display: flex;
}
.btn-dropdown {
position: relative;
cursor: pointer;
padding: 8px 16px;
border: 1px solid gray;
}
.dropdown-content-container {
overflow-y: hidden;
max-height: 0;
transition: all 0.25s;
}
.btn-dropdown.open>.dropdown-content-container {
max-height: 120px;
transition: all 0.4s;
}
<nav>
<div class="dropdown-wrapper">
<div class="btn-dropdown">
CLICK 1
<div class="dropdown-content-container">
<div class="dropdown-content">
DROPDOWN CONTENT 1
</div>
</div>
</div>
</div>
<div class="dropdown-wrapper">
<div class="btn-dropdown">
CLICK 2
<div class="dropdown-content-container">
<div class="dropdown-content">
DROPDOWN CONTENT 2.1<br /> DROPDOWN CONTENT 2.2<br /> DROPDOWN CONTENT 2.3<br /> DROPDOWN CONTENT 2.4<br />
</div>
</div>
</div>
</div>
</nav>

Text animation glitch on hover

I'm trying to create an animation, which moves text up and shows some content when hovered over a card. When hovered over the card, the animation works as expected but when the cursor is placed on top of the text, there's this weird glitch and the text keeps moving up and down.
I've put this up on : https://codepen.io/anon/pen/qGwpaG
My code
HTML
<section class="section" id="black">
<div class="container">
<p class="display-4 d-flex justify-content-center spacing text-center light bold mt-3" id="case-head"> Make something you love.</p>
</div>
<div class="container">
<div class="row no-gutters">
<div class="col-lg-4">
<a href="blog.html" class="hover">
<div class="image">
<img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" class="">
</div>
<p class="img-text color bold">Sample - 1</p>
<p class="img-description light">Lorem Ipsum </p>
<i class="fas fa-long-arrow-alt-right img-description arrow"></i>
</a>
</div>
</section>
CSS
.img-text {
padding: 10px;
position: absolute;
bottom: 0px;
left: 16px;
font-size: 30px;
}
.img-description{
position: absolute;
padding: 10px;
bottom: 35px;
left: 16px;
font-size: 20px;
color: white;
}
.image {
position:relative;
width: 100%;
height: auto;
}
.image img {
width:100%;
vertical-align:top;
}
.image:after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}
.color
{
color: white!important;
}
JS
$('.img-description').hide();
$(".hover").mouseover(function() {
$(this).find(".img-text").animate({ bottom: 100 },100);
$(this).find('.img-description').show();
})
$(".hover").mouseout(function() {
$(this).find(".img-text").animate({ bottom: 8 });
$(this).find('.img-description').hide();
})

You need to make sure that only the parent element is triggering the events. When using mouseover/mouseout, any child element will also trigger these events, which you don't want.
To fix this, you can either use mouseenter/mouseleave or, even better, use the hover shorthand:
$(".hover").hover(
function() {
$(this).find(".img-text").animate({ bottom: 100 }, 100);
$(this).find(".img-description").show();
},
function() {
$(this).find(".img-text").animate({ bottom: 8 });
$(this).find(".img-description").hide();
}
);
https://codepen.io/anon/pen/mYgxWv

How do I space out the contents of my <ul>?

I want to space out the contents to be evenly and then spaces to all have equal amount but I'm not sure how to do so. When I add padding to the list or increase the space in the column it messes up the format of the page
I have also tride putting an offset in the row but it still doesnt fix it
So I'm trying for it to be like:
Projects About Me Contact Me
Pic Pic Pic
But anytime I change something it changes to:
Projects Pic About Me Contact Me
Pic Pic
.header {
font-family: Cambria;
font-size: xx-large;
text-align: center;
padding: 50px;
background-color: lightblue;
background-image: linear-gradient(to bottom right, darkgray, lightblue);
}
.home {
width: 100%;
}
.home div {
width: 200px;
}
.home img {
vertical-align: middle;
border-style: none;
height: 200px;
width: 200px;
object-fit: cover;
}
.home ul {
display: inline-block;
list-style-type: none;
overflow: hidden;
}
.home li {
margin-left: 20px;
list-style: none;
float: left;
}
.home a {
text-decoration: none;
font-family: Cambria;
font-weight: lighter;
color: steelblue;
}
.home a:hover {
font-weight: bold;
color: darkblue;
}
.home img:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<body style="background-color:mintcream">
<div class="header">
<span style="color:darkblue">const</span>
<span style="color:white">_name =</span>
<span style="color:darkblue">"My_Name"</span>
</div>
<div class="row">
<ul class="home" style="padding-top:20px;">
<li class="col-md-3">
<a href="#">
<span style="font-size:35px">Projects</span>
<span><img src="https://via.placeholder.com/300.png/09f/fff"/
</span>
</a>
</li>
<li class="col-md-3">
<a href="#">
<span style="font-size:35px">About Me</span>
<div><img src="https://via.placeholder.com/300.png/09f/fff" /></div>
</a>
</li>
<li class="col-md-2">
<a href="#">
<span style="font-size:35px">Contact Me</span>
<div><img src="https://via.placeholder.com/300.png/09f/fff" /></div>
</a>
</li>
</ul>
</div>
</body>

As #apanesar11 pointed out, grids should resolve your problem.
Another solution is the use of the flexbox.
I made you and example with the snippet given by #mplungjan :
https://codepen.io/mdubus/pen/BvXXmJ
.home {
width: 100%;
display:flex;
flex-direction:row;
justify-content:space-around;
}
If you're not satisfied with the alignment, you can also replace the justify-content:space-around; in .home with justify-content:space-between;.
I'm not sure about the kind of alignment you want, but hope it helps ! :)
EDIT :
I also changed the .home a with
display:flex;
flex-direction:column; so that your picture goes under your text.

have you used grid systems? It'll make everything a lot easier to do and your webpage much more responsive. Check out some of my sample code here: https://github.com/apanesar11/CSS-Grids

The reason you're having this behavior currently is because span is an inline element, whereas div is a block element. Because of this the about.png and phone.jpg images are positioned currently, because start a new, since they are wrapped in a div element. Your project.jpg img is wrapped within a span element and span elements do not start on a new line and they take only the space they need.

Hamburger Icon slide out menu in Angular

I am trying to create a slide out menu from a span in my nav and am having difficulty. Hope someone can help as I have searched Google and not finding what I am after. Basically, I have this code:
<div style="background-color: #002F33; min-height:50px;">
<span class="navIcon" style="width: 50px; border-right-style: solid 1px #939393;"><img src="assets/images/icon_hamburger.png"></span>
<div>
Link1
Link2
Link3
</div>
<span style="color: #ffffff; font-size: 22px; padding-left:20px; padding-top: 21px;">Moneyball Tool</span>>
</div>
I simply want to get the menu when the span image is clicked to flyout over the content below. Not sure why I am having trouble with this, but appreciate any help you can give.

I added ids to some of your divs and use javascript to toggle a css class created below
.menu_items_toggle {
opacity: 1 !important;
top: 100% !important;
}
Snippet below
//make a refernce to the container that holds all your links
var menu_item_container = document.getElementById("menu_items")
//This function will show/hide menu options if image is clicked on
function clicker() {
menu_item_container.classList.toggle('menu_items_toggle');
console.log(menu_item_container.classList.contains('menu_items_toggle'))
}
console.log(document.getElementById("span_img_container"));
document.getElementById("menu_img").addEventListener('click', clicker)
#menu {
position: relative;
}
#menu_items {
position: absolute;
top: 0%;
opacity: 0;
transition: all 0.5s;
}
.menu_items_toggle {
opacity: 1 !important;
top: 100% !important;
}
img {
width: 100px;
height: 100px;
}
<div id="menu" style="background-color: #002F33; min-height:50px;">
<span id="span_img_container" class="navIcon" style="width: 50px; border-right-style: solid 1px #939393;"><img id="menu_img" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcToFURgZ4pNY28Zsq8ytnVFL7hzYMpGpBSpQWwGqSP6N77YRUXn"></span>
<div id="menu_items" class="">
Link1
<br>
Link2
<br>
Link3
<br>
</div>
<span style="color: #ffffff; font-size: 22px; padding-left:20px; padding-top: 21px;">Moneyball Tool</span>>
</div>

How do I make this jquery popup function reusable?

So I am using this code:
http://jsfiddle.net/xSmNs/
$(document).ready(function() {
$('#lightbox_button').click(function() {
$('#lightbox').fadeIn('slow');
$('#lightbox_panel').fadeIn('slow');
});
$('#close_lightbox').click(function() {
$('#lightbox').fadeOut('slow');
$('#lightbox_panel').fadeOut('slow');
});
});
To make popups on click of a link. I want multiple links that output different divs. I was going to just make multiple instances of this code (changing the id so that the buttons open their corresponding divs) but I am wondering if there is a more efficient method using this code?

You can use $.fn.lightbox as a function itself and apply it on a DOM object.
http://jsfiddle.net/7rfpwctm/2/
$(document).ready(function() {
$.fn.lightbox = function(){
$(this).click(function() {
$('#lightbox').fadeIn('slow');
$('#lightbox_panel').fadeIn('slow');
});
$('#close_lightbox').click(function() {
$('#lightbox').fadeOut('slow');
$('#lightbox_panel').fadeOut('slow');
});
};
$('#lightbox_button').lightbox();
$('#another_lightbox_button').lightbox();
});
#lightbox_panel
{
position: relative;
z-index: 99;
width: 500px;
height: 100px;
margin: 30px auto 0;
background-color: #CCC;
display: none;
padding: 10px;
}
#lightbox
{
z-index: 90;
position: absolute;
background-color: #000;
opacity: 0.8;
filter: alpha(opacity=80);
width: 100%;
height: 100%;
display: none;
top: 0;
}
#close_lightbox
{
}
#lightbox_button{
position:absolute;
left:0;
top:100%;
width:200px;
}
#another_lightbox_button{
position:absolute;
right:0;
top:100%;
width:400px;
}
.button
{
position: absolute;
text-decoration: none;
padding: 2px 10px;
border: 1px solid #000;
display: inline-block;
bottom: 10px;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<a href="#" id="lightbox_button">
<div class="button">button</div>
</a>
<a href="#" id="another_lightbox_button">
<div class="button">another button</div>
</a>
<div id="lightbox_panel">
<h1>lightbox panel</h1>
<a href="#" id="close_lightbox">
<div class="button">close</div>
</a>
</div>
</div>
<div id="lightbox"></div>
Something like this helps?

Give the light box button 2 data-attributes, which points to the divs which needs to be popup when clicking on that. Also use a common class for all light box buttons.
<a href="#" class="lightbox_button" data-box="#lightbox" data-panel="#lightbox_panel">
<div class="button" >button</div>
</a>
Then you can re-use the code like,
$('.lightbox_button').click(function () {
$($(this).data("box")).fadeIn("slow");
$($(this).data("panel")).fadeIn("slow");
});
Fiddle

You could use this function:
function doModal(boxid,show) {
if (show) {
$('#'+boxid).fadeIn('slow');
$('#'+boxid+'_panel').fadeIn('slow');
} else {
$('#'+boxid).fadeOut('slow');
$('#'+boxid+'_panel').fadeOut('slow');
}
}
And then on your buttons or links:
<span onclick="doModal('Box1',true)">Open Box 1</span>
<span onclick="doModal('Box2',true)">Open Box 2</span>
For closing the boxes:
<span onclick="doModal('Box1',false)">Close Box 1</span>
<span onclick="doModal('Box2',false)">Close Box 2</span>