When my elements have flex-direction: column they no longer have transitions - javascript

I have three buttons, each with their dropdown menu which is toggled on click. The dropdown menu has a transition of transition: all 0.2s and it works just fine when they are displayed as flex-direction: row. Now I have a media query that displays them with flex-direction: column and for some reason they no longer have transitions.
const buttons = document.querySelectorAll('.link');
let arrow = document.querySelectorAll('.arrow-pag');
let dropMenu = document.querySelectorAll('.link-dropdown');
Array.from(buttons).forEach((el, index) => {
let toggled = false;
el.addEventListener('click', function(event) {
if (toggled) {
el.style.backgroundColor = "white";
el.style.color = "var(--midnightBlue)";
arrow[index].style.borderColor = "var(--midnightBlue)";
arrow[index].classList.toggle('up-pag');
dropMenu[index].style.height = "0px";
toggled = false;
} else {
console.log(index);
el.style.backgroundColor = "var(--midnightBlue)";
el.style.color = "white";
arrow[index].style.borderColor = "white";
arrow[index].classList.toggle('up-pag');
dropMenu[index].style.height = "100%";
toggled = true;
}
});
});
:root {
--fontSansSerif: 'Inter';
--fontSerif: 'DM Serif Display';
--heightDropdown: 250px;
--bluePigment: #333895;
--midnightBlue: #1B1164;
--aliceBlue: #E4EBF8;
--lightSteelBlue: #B0C5E3;
--darkSteelBlue: #86ADE3;
}
.pagini-folositoare,
.toate-linkurile {
width: 100%;
}
.toate-linkurile {
font-weight: 500;
display: flex;
gap: 30px;
}
.link {
box-shadow: 0 3px 7px 2px rgba(0, 0, 0, 0.1);
width: 100%;
padding: 20px 10px;
background-color: white;
border-color: var(--midnightBlue);
transition: all 0.15s;
}
.link:hover {
cursor: pointer;
}
.link-container {
width: 33%;
}
.link h2 {
user-select: none;
margin: 0;
font-weight: 500;
text-align: center;
}
.arrow-pag {
vertical-align: middle;
border: solid;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin-bottom: 9px;
margin-left: 10px;
}
.down-pag {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transition: all 0.15s;
}
.up-pag {
margin-bottom: 4px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.link-dropdown {
background-color: white;
box-shadow: 0 3px 7px 2px rgba(0, 0, 0, 0.1);
padding: 0px 10px;
height: 0px;
overflow: hidden;
transition: all 0.2s;
}
.link-dropdown ul {
margin: 0px;
padding-left: 15px;
}
.link-dropdown ul li {
margin-bottom: 10px;
}
#media all and (max-width: 790px) {
.toate-linkurile {
flex-direction: column;
}
.link-container {
width: 100%;
transition: all 0.2s;
}
.link {
width: 100%;
transition: all 0.2s;
}
}
<div class="pagini-folositoare">
<h1>Pagini folositoare</h1>
<div class="toate-linkurile">
<div class="link-container">
<div class="link">
<h2>MEDIA<i class="arrow-pag down-pag"></i></h2>
</div>
<div class="link-dropdown height">
<ul>
<li><a target="_blank" href="https://stackoverflow.com">aaaa</a></li>
<li><a target="_blank" href="https://stackoverflow.com">bbbbb</a></li>
<li><a target="_blank" href="https://stackoverflow.com">cccc</a></li>
</ul>
</div>
</div>
<div class="link-container">
<div class="link">
<h2>CLUBURI<i class="arrow-pag down-pag"></i></h2>
</div>
<div class="link-dropdown height">
<ul>
<li><a target="_blank" href="https://stackoverflow.com">link 1</a></li>
<li><a target="_blank" href="https://stackoverflow.com">link 2</a></li>
<li><a target="_blank" href="https://stackoverflow.com">link 3</a></li>
</ul>
</div>
</div>
<div class="link-container">
<div class="link">
<h2>ADMITERE<i class="arrow-pag down-pag"></i></h2>
</div>
<div class="link-dropdown">
<ul>
<li><a target="_blank" href="https://stackoverflow.com">aaaa</a></li>
<li><a target="_blank" href="https://stackoverflow.com">bbbbb</a></li>
<li><a target="_blank" href="https://stackoverflow.com">cccccc</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
Now I don't know if I did something wrong in my code or if I'm missing a transition somewhere, but I can't figure this out


I think this is because when in flex-direction: column, the height of each link-container item need to be specified for a transition of height to work.
Since this does not seem practical in this use case, you could use flex-wrap: wrap instead of flex-direction: column.
#media all and (max-width: 790px) {
.toate-linkurile {
flex-wrap: wrap;
}
}
This will make the transition of .link-dropdown happen, which hopefully achieves the desired result without major changes of the existing code.
Full example:
const buttons = document.querySelectorAll(".link");
let arrow = document.querySelectorAll(".arrow-pag");
let dropMenu = document.querySelectorAll(".link-dropdown");
Array.from(buttons).forEach((el, index) => {
let toggled = false;
el.addEventListener("click", function (event) {
if (toggled) {
el.style.backgroundColor = "white";
el.style.color = "var(--midnightBlue)";
arrow[index].style.borderColor = "var(--midnightBlue)";
arrow[index].classList.toggle("up-pag");
dropMenu[index].style.height = "0px";
toggled = false;
} else {
console.log(index);
el.style.backgroundColor = "var(--midnightBlue)";
el.style.color = "white";
arrow[index].style.borderColor = "white";
arrow[index].classList.toggle("up-pag");
dropMenu[index].style.height = "100%";
toggled = true;
}
});
});
:root {
--fontSansSerif: "Inter";
--fontSerif: "DM Serif Display";
--heightDropdown: 250px;
--bluePigment: #333895;
--midnightBlue: #1b1164;
--aliceBlue: #e4ebf8;
--lightSteelBlue: #b0c5e3;
--darkSteelBlue: #86ade3;
}
.pagini-folositoare,
.toate-linkurile {
width: 100%;
}
.toate-linkurile {
font-weight: 500;
display: flex;
gap: 30px;
}
.link {
box-shadow: 0 3px 7px 2px rgba(0, 0, 0, 0.1);
width: 100%;
padding: 20px 10px;
background-color: white;
border-color: var(--midnightBlue);
transition: all 0.15s;
}
.link:hover {
cursor: pointer;
}
.link-container {
width: 33%;
}
.link h2 {
user-select: none;
margin: 0;
font-weight: 500;
text-align: center;
}
.arrow-pag {
vertical-align: middle;
border: solid;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin-bottom: 9px;
margin-left: 10px;
}
.down-pag {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transition: all 0.15s;
}
.up-pag {
margin-bottom: 4px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.link-dropdown {
background-color: white;
box-shadow: 0 3px 7px 2px rgba(0, 0, 0, 0.1);
padding: 0px 10px;
height: 0px;
overflow: hidden;
transition: all 0.2s;
}
.link-dropdown ul {
margin: 0px;
padding-left: 15px;
}
.link-dropdown ul li {
margin-bottom: 10px;
}
#media all and (max-width: 790px) {
.toate-linkurile {
flex-wrap: wrap;
}
.link-container {
width: 100%;
transition: all 0.2s;
}
.link {
width: 100%;
transition: all 0.2s;
}
}
<div class="pagini-folositoare">
<h1>Pagini folositoare</h1>
<div class="toate-linkurile">
<div class="link-container">
<div class="link">
<h2>MEDIA<i class="arrow-pag down-pag"></i></h2>
</div>
<div class="link-dropdown height">
<ul>
<li><a target="_blank" href="https://stackoverflow.com">aaaa</a></li>
<li><a target="_blank" href="https://stackoverflow.com">bbbbb</a></li>
<li><a target="_blank" href="https://stackoverflow.com">cccc</a></li>
</ul>
</div>
</div>
<div class="link-container">
<div class="link">
<h2>CLUBURI<i class="arrow-pag down-pag"></i></h2>
</div>
<div class="link-dropdown height">
<ul>
<li>
<a target="_blank" href="https://stackoverflow.com">link 1</a>
</li>
<li>
<a target="_blank" href="https://stackoverflow.com">link 2</a>
</li>
<li>
<a target="_blank" href="https://stackoverflow.com">link 3</a>
</li>
</ul>
</div>
</div>
<div class="link-container">
<div class="link">
<h2>ADMITERE<i class="arrow-pag down-pag"></i></h2>
</div>
<div class="link-dropdown">
<ul>
<li><a target="_blank" href="https://stackoverflow.com">aaaa</a></li>
<li><a target="_blank" href="https://stackoverflow.com">bbbbb</a></li>
<li>
<a target="_blank" href="https://stackoverflow.com">cccccc</a>
</li>
</ul>
</div>
</div>
</div>
</div>

Related

Scrolling div/section with indicators

I want to create a vertical scrolling div with an active indicators. However I'm having trouble with it event firing on the div targeted. I set it to window.addEventListener it works fine at full height of the window but if I set it to div.addEventListener it's not firing inside of the element at all. I'm Hoping someone has some pointer for this. Here's what I got so far.
section.scroller {
max-width: 900px;
margin: auto;
background: antiquewhite;
scroll-behavior: smooth;
position: relative;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
padding-right: 17px;
// padding: 0 17px;
box-sizing: content-box;
}
.sec {
min-height: 100vh;
// width: 100vw;
display: flex;
align-items: center;
justify-content: center;
scroll-behavior: smooth;
// width: 100%;
&:nth-child(odd) {
background: #ddd;
}
}
.lnbNavbar {
top: 50%;
transform: translateY(-50%);
margin: 0;
padding: 0;
border-radius: 15px;
transition: opacity .4s ease .2s;
opacity: 0;
position: relative;
float: right;
transition: .3s all;
ul {
list-style: none;
padding: 0;
margin: 0;
li {
width: 0px;
position: relative;
text-align: right;
.dot {
border: 2px solid#333;
width: 10px;
height: 10px;
display: inline-block;
border-radius: 50%;
transition: .2s ease;
span {
display: inline-block;
}
}
}
}
}
.lnbNavbar ul li a:active,
.lnbNavbar ul li a:hover {
border-color: rgb(124, 7, 7);
background-color: gray;
transform: scale(1.8);
}
.lnbNavbar ul li.active a,
.lnbNavbar ul li:hover a {
border-color: rgb(124, 7, 7);
background-color: gray;
transform: scale(1.8);
}
.outter {
width: 800px;
height: 500px;
margin: auto;
overflow: hidden;
}
<div class="outter" id="outter">
<section class="scroller" id="scroller">
<nav class="lnbNavbar">
<ul>
<li class="home active">
<a href="#home" class=" home dot">
<span></span>
</a>
</li>
<li class="about">
<a href="#about" class="about dot">
<span></span>
</a>
</li>
<li class="service">
<a href="#service" class="service dot">
<span></span>
</a>
</li>
<li class="project">
<a href="#project" class="project dot">
<span></span>
</a>
</li>
<li class="contact">
<a href="#contact" class="contact dot">
<span></span>
</a>
</li>
</ul>
</nav>
<section class="sec" id="about"><h4>about</h4></section>
<section class="sec" id="service"><h4>service</h4></section>
<section class="sec" id="project"><h4>project</h4></section>
<section class="sec" id="contact"><h4>contact</h4></section>
<section class="sec" id="home"><h4>home</h4></section>
</section>
<script>
const sections = document.querySelectorAll('section');
const navLi = document.querySelectorAll('.lnbNavbar ul li');
const div = document.getElementById("outter")[0];
div.addEventListener('scroll', ()=> {
let current = '';
sections.forEach( section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if(pageYOffset >= (sectionTop - sectionHeight / 4)){
current = section.getAttribute('id');
}
})
console.log(current);
navLi.forEach( li => {
li.classList.remove('active');
if(li.classList.contains(current)){
li.classList.add('active')
}
})
})
</script>
</div>

How to align the dropdown menu with the button

I have a dropdown menu with html, css and some js. It works fine, I also added some animations to it. Now I would like to align it right under the click me button! I have been looking around on the stack and tried with float and align but I can't. Sorry but I'm new to this, can anyone help me ?
I appreciate any response, thanks.
function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className += " w3-hide";
setTimeout(function(){
x.className = x.className.replace(" w3-show", "");
x.className = x.className.replace(" w3-hide", "");
},500)
}
}
/*Items menu*/
.user_menu_item {
display: flex;
align-items: center;
}
.user_menu_item:hover {
background: whitesmoke;
border-left: 4px solid blue;
transition: 0.3s;
}
.user_menu_item:not(:hover) {
transition: 0.3s;
}
.user_menu_item > a {
display: flex;
align-items: center;
padding: 12px 10px 12px 10px;
width: 100%;
font-size: 14px;
color: #75777D;
}
.w3-container {
position: absolute;
top: 15%;
}
.w3-dropdown-click {
display: flex;
position: relative;
}
.w3-dropdown-content {
display: none;
background-color: whitesmoke;
min-width: 160px;
overflow: hidden;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
position:relative;
animation:animateFromBottom 0.6s
}
#keyframes animateFromBottom {
from{bottom:-50px;opacity:0} to{bottom:0;opacity:1}
}
#keyframes animateToBottom {
from{bottom:0;opacity:1} to{bottom:-50px;opacity:0}
}
.w3-bar-block .w3-bar-item {
width:100%;
display:block;
padding:8px 16px;
text-align:left;
border:none;
white-space:normal;
float:none;
outline:0
}
.w3-show-block,.w3-show {
display:block!important
}
.w3-dropdown-content.w3-hide {
animation:animateToBottom 0.6s
}
.w3-button {
float: right;
}
<button onclick="myFunction()" class="w3-button">Click Me!</button>
<div class="w3-container">
<div class="w3-dropdown-click">
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
<div class="user_menu_item">
<a href="/account">
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu_item">
<a href="ordini">
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu_item">
<a href="libreria">
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu_item">
<a href="impostazioni">
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu_item">
<a href="wp-login.php?action=logout">
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>

You can create a container div to put both the menu and the button themselves into and then give that container absolute positioning properties like you're doing with your menu. You'll have to adjust your menu position so when it appears it's not overlapping the button but I took care of that in the code. Also, you'll need to modify the position on the menu itself if you want the button and the menu to be on the absolute right and not offset and overflowing the right side of the screen.
See: https://developer.mozilla.org/pt-BR/docs/Web/CSS/position
function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className += " w3-hide";
setTimeout(function() {
x.className = x.className.replace(" w3-show", "");
x.className = x.className.replace(" w3-hide", "");
}, 500)
}
}
.container {
display: block;
margin: 0 0;
position: absolute;
top: 10px;
right: 0px;
}
/*Items menu*/
.user_menu_item {
display: flex;
align-items: center;
}
.user_menu_item:hover {
background: whitesmoke;
border-left: 4px solid blue;
transition: 0.3s;
}
.user_menu_item:not(:hover) {
transition: 0.3s;
}
.user_menu_item>a {
display: flex;
align-items: center;
padding: 12px 10px 12px 10px;
width: 100%;
font-size: 14px;
color: #75777D;
}
.w3-container {
position: absolute;
top: 25px;
right: 0px;
}
.w3-dropdown-click {
display: flex;
position: relative;
}
.w3-dropdown-content {
display: none;
background-color: whitesmoke;
min-width: 160px;
overflow: hidden;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
position: relative;
animation: animateFromBottom 0.6s
}
#keyframes animateFromBottom {
from {
bottom: -50px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
#keyframes animateToBottom {
from {
bottom: 0;
opacity: 1
}
to {
bottom: -50px;
opacity: 0
}
}
.w3-bar-block .w3-bar-item {
width: 100%;
display: block;
padding: 8px 16px;
text-align: left;
border: none;
white-space: normal;
float: none;
outline: 0;
}
.w3-show-block,
.w3-show {
display: block !important
}
.w3-dropdown-content.w3-hide {
animation: animateToBottom 0.6s
}
.w3-button {
display: block;
}
<div class="container">
<button onclick="myFunction()" class="w3-button">Click Me!</button>
<div class="w3-container">
<div class="w3-dropdown-click">
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
<div class="user_menu_item">
<a href="/account">
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu_item">
<a href="ordini">
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu_item">
<a href="libreria">
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu_item">
<a href="impostazioni">
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu_item">
<a href="wp-login.php?action=logout">
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>
</div>

Add popup and button to the same parent element and set its position relative and then set top value of popup value to static value(height of btn)
function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className += " w3-hide";
setTimeout(function() {
x.className = x.className.replace(" w3-show", "");
x.className = x.className.replace(" w3-hide", "");
}, 500);
}
}
.main_container {
position: relative;
}
/*Items menu*/
.user_menu_item {
display: flex;
align-items: center;
}
.user_menu_item:hover {
background: whitesmoke;
border-left: 4px solid blue;
transition: 0.3s;
}
.user_menu_item:not(:hover) {
transition: 0.3s;
}
.user_menu_item>a {
display: flex;
align-items: center;
padding: 12px 10px 12px 10px;
width: 100%;
font-size: 14px;
color: #75777d;
}
.w3-container {
position: absolute;
right: 0;
top: 25px;
}
.w3-dropdown-click {
display: flex;
position: relative;
}
.w3-dropdown-content {
display: none;
background-color: whitesmoke;
min-width: 160px;
overflow: hidden;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
position: relative;
animation: animateFromBottom 0.6s;
}
#keyframes animateFromBottom {
from {
bottom: -50px;
opacity: 0;
}
to {
bottom: 0;
opacity: 1;
}
}
#keyframes animateToBottom {
from {
bottom: 0;
opacity: 1;
}
to {
bottom: -50px;
opacity: 0;
}
}
.w3-bar-block .w3-bar-item {
width: 100%;
display: block;
padding: 8px 16px;
text-align: left;
border: none;
white-space: normal;
float: none;
outline: 0;
}
.w3-show-block,
.w3-show {
display: block !important;
}
.w3-dropdown-content.w3-hide {
animation: animateToBottom 0.6s;
}
.w3-button {
float: right;
}
<div class="main_container">
<button onclick="myFunction()" class="w3-button">Click Me!</button>
<div class="w3-container">
<div class="w3-dropdown-click">
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
<div class="user_menu_item">
<a href="/account">
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu_item">
<a href="ordini">
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu_item">
<a href="libreria">
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu_item">
<a href="impostazioni">
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu_item">
<a href="wp-login.php?action=logout">
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>
</div>

Is there a way to fix this problem of a slideToggle() inside a slideToggle() inside a slideToggle() while using flex-grids?

If you run the code snippet, you'll see that the output is kind of "bugged".
I have been stuck on this for the past 2 days and can't seem to make it work at all.
I tried several solutions found here on stack, but none seem to do it for me. Basically there is Parent, Child1....n, and Grandchild1....n. Whenever i click on the parent, the list with all children should open. And for every child i click, the list with all grandchildren should open.
My code kinda does that, but not in a visually pleasant way.
PS: I am not a web developer and this whole thing is a request from my boss so everything is in fact new for me.
Thank you all and hope this question does not upset anyone.
$(document).ready(function() {
$("#infrtransp").click(function() {
$("#infrtranspUL").slideToggle(1000, "linear");
$("#infrtransp").toggleClass('fa-book fa-book-open');
if ($("#infrtranspFORM").css("display", "none")) {
$("#infrtranspFORM").css("display", "none");
} else {
$("#infrtranspFORM").slideToggle(1000, "linear");
}
});
$("#infrtranspUL").click(function() {
$("#infrtranspFORM").slideToggle(1000, "linear");
$("#infrtranspUL").toggleClass('fa-book fa-book-open');
});
$("#infrtransp").mouseover(function() {
jQuery('#infrtransp').css('cursor', 'pointer');
});
$("#infrtranspUL").mouseover(function() {
jQuery('#infrtranspUL').css('cursor', 'pointer');
});
});
.flex-grid {
display: flex;
align-items: center;
justify-content: center;
background-color: #eceef1;
border-radius: 10px;
font-size: 15px;
-webkit-box-shadow: 0px 0px 7px 1px #ccc;
/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 7px 1px #ccc;
/* Firefox 3.5 - 3.6 */
box-shadow: 0px 0px 7px 1px #ccc;
}
.flex-grid .col2 {
flex: 1;
}
.flex-grid {
margin: 0 0 20px 0;
}
.col1 {
background: #eceef1;
padding: 20px;
margin-left: 20px;
font-size: 15px;
color: #43597c;
}
.col2 {
background: #eceef1;
padding: 20px;
padding-left: 20px;
color: #43597c;
text-align: justify;
}
.col3 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
.col4 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
#keyframes slideIn {
0% {
transform: translateX(0);
opacity: 0.2;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.maindiv {
animation: 1s ease-out 0s 1 slideIn;
height: 1000px;
overflow: scroll;
padding: 10px;
}
ul,
li {
padding-top: 10px;
margin-bottom: 1px;
margin-top: -10px;
padding-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/9888b57086.js" crossorigin="anonymous"></script>
<div class="maindiv">
<div class="flex-grid">
<div class="fas fa-book col1" id="infrtransp"></div>
<div class="col2">
<b>Infrastructură de transport</b>
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza firmele)
</div>
</div>
<ul style="list-style-type: none;">
<li style="display: none; padding-left: 20px;" id="infrtranspUL">
<div class="flex-grid">
<div class="fas fa-book col1"></div>
<div class="col2"><b>AndConsult</b>
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza formularul)
</div>
</div>
</li>
<ul>
<li style="padding-left:80px; display:none; list-style-type: none;" id="infrtranspFORM">
<div class="flex-grid">
<div class="fas fa-file col1"></div>
<div class="col2">Formular - AndConsult
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza sau descarca formularul)
</div>
<a href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf" target="_blank">
<div class="fas fa-eye col3"></div>
</a>
<a download href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf" <div class="fas fa-download col4"></div>
</a>
</div>
</li>
</ul>
</ul>
</div>

First I congratulate you , despite you're not a developer , you did a great work
If I could understand you issue ,
First, in HTML code you have to move the id #infrtranspUL from the li to the child .fa-book div element,
then your condition of showing li child was wrong replace it ony
from
if ($("#infrtranspFORM").css("display", "none")) {
$("#infrtranspFORM").css("display", "none");
} else {
$("#infrtranspFORM").slideToggle(1000, "linear");
}
to
if (!($("#infrtranspFORM").css("display") === "none")) {
$("#infrtranspUL").toggleClass('fa-book fa-book-open');
$("#infrtranspFORM").slideToggle(1000, "linear");
}
And now it should work :
See below snippet :
$(document).ready(function() {
$("#infrtransp").click(function() {
$("#infrtranspUL").parents("li").slideToggle(1000, "linear");
$("#infrtransp").toggleClass('fa-book fa-book-open');
if (!($("#infrtranspFORM").css("display") === "none")) {
$("#infrtranspUL").toggleClass('fa-book fa-book-open');
$("#infrtranspFORM").slideToggle(1000, "linear");
}
});
$("#infrtranspUL").click(function() {
$("#infrtranspFORM").slideToggle(1000, "linear");
$("#infrtranspUL").toggleClass('fa-book fa-book-open');
});
});
.flex-grid {
display: flex;
align-items: center;
justify-content: center;
background-color: #eceef1;
border-radius: 10px;
font-size: 15px;
-webkit-box-shadow: 0px 0px 7px 1px #ccc;
/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 7px 1px #ccc;
/* Firefox 3.5 - 3.6 */
box-shadow: 0px 0px 7px 1px #ccc;
}
.flex-grid .col2 {
flex: 1;
}
.flex-grid {
margin: 0 0 20px 0;
}
.col1 {
background: #eceef1;
padding: 20px;
margin-left: 20px;
font-size: 15px;
color: #43597c;
}
.col2 {
background: #eceef1;
padding: 20px;
padding-left: 20px;
color: #43597c;
text-align: justify;
}
.col3 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
.col4 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
#keyframes slideIn {
0% {
transform: translateX(0);
opacity: 0.2;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.maindiv {
animation: 1s ease-out 0s 1 slideIn;
height: 1000px;
overflow: scroll;
padding: 10px;
}
ul,
li {
padding-top: 10px;
margin-bottom: 1px;
margin-top: -10px;
padding-right: 5px;
}
#infrtransp:hover,
#infrtranspUL:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/9888b57086.js" crossorigin="anonymous"></script>
<div class="maindiv">
<div class="flex-grid">
<div class="fas fa-book col1" id="infrtransp"></div>
<div class="col2">
<b>Infrastructură de transport</b>
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza firmele)
</div>
</div>
<ul style="list-style-type: none;">
<li style="display: none; padding-left: 20px;">
<div class="flex-grid">
<div class="fas fa-book col1" id="infrtranspUL"></div>
<div class="col2"><b>AndConsult</b>
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza formularul)
</div>
</div>
</li>
<ul>
<li style="padding-left:80px; display:none; list-style-type: none;" id="infrtranspFORM">
<div class="flex-grid">
<div class="fas fa-file col1"></div>
<div class="col2">Formular - AndConsult
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza sau descarca formularul)
</div>
<a href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf" target="_blank">
<div class="fas fa-eye col3"></div>
</a>
<a download href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf">
<div class="fas fa-download col4"></div>
</a>
</div>
</li>
</ul>
</ul>
</div>

Not too sure of what you expect, but , font-awsome uses <i> tags, maybe you can stick to it to easily read the code & avoid confusion .
You toggle a class (for an icone) on an element that does not hold it at first : $("#infrtranspUL").toggleClass('fa-book fa-book-open'); , you can update the selector $("#infrtranspUL i.fa").toggleClass('fa-book fa-book-open');.
height + overflow does not seem necessary here .
possible result you are expecting:
$(document).ready(function() {
$("#infrtransp").click(function() {
$("#infrtranspUL").slideToggle(1000, "linear");
$("#infrtransp ").toggleClass('fa-book fa-book-open');
if ($("#infrtranspFORM").css("display", "none")) {
$("#infrtranspFORM").css("display", "none");
} else {
$("#infrtranspFORM").slideToggle(1000, "linear");
}
});
$("#infrtranspUL").click(function() {
$("#infrtranspFORM").slideToggle(1000, "linear");
$("#infrtranspUL i.fa").toggleClass('fa-book fa-book-open');
});
$("#infrtransp").mouseover(function() {
jQuery('#infrtransp').css('cursor', 'pointer');
});
$("#infrtranspUL").mouseover(function() {
jQuery('#infrtranspUL').css('cursor', 'pointer');
});
});
.flex-grid {
display: flex;
align-items: center;
justify-content: center;
background-color: #eceef1;
border-radius: 10px;
font-size: 15px;
-webkit-box-shadow: 0px 0px 7px 1px #ccc;
/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 7px 1px #ccc;
/* Firefox 3.5 - 3.6 */
box-shadow: 0px 0px 7px 1px #ccc;
}
.flex-grid .col2 {
flex: 1;
}
.flex-grid {
margin: 0 0 20px 0;
}
.col1 {
background: #eceef1;
padding: 20px;
margin-left: 20px;
font-size: 15px;
color: #43597c;
}
.col2 {
background: #eceef1;
padding: 20px;
padding-left: 20px;
color: #43597c;
text-align: justify;
}
.col3 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
.col4 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
#keyframes slideIn {
0% {
transform: translateX(0);
opacity: 0.2;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.maindiv {
animation: 1s ease-out 0s 1 slideIn;
padding: 10px;
}
ul,
li {
padding-top: 10px;
margin-bottom: 1px;
margin-top: -10px;
padding-right: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="maindiv">
<div class="flex-grid">
<div class="fa fa-book col1" id="infrtransp"></div>
<div class="col2">
<b>Infrastructură de transport</b>
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza firmele)
</div>
</div>
<ul style="list-style-type: none;">
<li style="display: none; padding-left: 20px;" id="infrtranspUL">
<div class="flex-grid">
<i class="fa fa-book col1"></i>
<div class="col2"><b>AndConsult</b>
<br>(Click pe <i class="fas fa-book"></i> pentru a vizualiza formularul)
</div>
</div>
</li>
<ul>
<li style="padding-left:80px; display:none; list-style-type: none;" id="infrtranspFORM">
<div class="flex-grid">
<i class="fas fa-file col1"></i>
<div class="col2">Formular - AndConsult
<br>(Click pe <i class="fas fa-book"></i> pentru a vizualiza sau descarca formularul)
</div>
<a href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf" target="_blank">
<i class="fas fa-eye col3"></i>
</a>
<a download href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf">
<i class="fas fa-download col4"></i>
</a>
</div>
</li>
</ul>
</ul>
</div>

jQuery - Toggle menu without using stopImmediatePropagation();

Currently the snippet only allows toggling of each menu when I un-comment the e.stopImmediatePropagation();.
The problem is I cannot use e.stopImmediatePropagation(); because I have to use an animation on the .button that would be killed by the stop.
How do I change the code to be able to toggle the menu's as is done when using e.stopImmediatePropagation();, but not have to use it.
To emulate problem: Click the Apple or Google logo (or Bell Icon) and then click it
again. The solution should remove .active from it's associated
.modal and it should close just like it does when clicking document (except for Bell Icon button which isn't set up to close when document is clicked). I just don't know how to acheive this without using e.stopImmediatePropagation();
$("[data-close]").click(function(e) {
const dataClose = $(this).attr("data-close");
const elem = $('[data-id="' + dataClose + '"]').length ?
$('[data-id="' + dataClose + '"]') :
$(dataClose);
if (elem.hasClass("active") && elem.is(":visible")) {
elem.removeClass("active");
/* e.stopImmediatePropagation();*/
}
});
$(".button").on("click", function() {
const id = $(this).prop("id");
$(".modal").each(function() {
$(this).toggleClass("active", $(this).data("id") == id);
});
});
$(document).on("click", function(e) {
if (
$(".apple-modal, .google-modal").hasClass("active") &&
!$(".modal, .modal *, .button").is(e.target)
) {
$(".modal").removeClass("active");
}
});
.buttons {
display: flex;
align-items: center;
}
.button {
height: 30px;
cursor: pointer;
border: 2px solid;
padding: 1rem;
font-size: 28px;
}
#icon {
color: silver;
}
.header {
height: 15px;
background: #eee;
}
.modal {
position: fixed;
top: 72px;
right: 15px;
z-index: 6;
opacity: 0;
visibility: hidden;
transform: scale(0.5);
transform-origin: top right;
transition: 0.15s;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.modal:after {
content: "";
width: 15px;
height: 15px;
background: inherit;
position: absolute;
background: #eee;
top: -6px;
right: 8px;
opacity: 0;
visibility: hidden;
transform: rotate(45deg) scale(0.5);
transition: 0.15s;
}
.modal.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.modal.active:after {
opacity: 1;
visibility: visible;
transform: rotate(45deg) scale(1);
}
<script src="https://pro.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="buttons">
<img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button" id="google" data-close="google" />
<img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="button" id="apple" data-close="apple" />
<div class="button" id="icon" data-close="icon">
<i class="fas fa-bell"></i>
</div>
</div>
<div class="modal google-modal" data-id="google">
<div class="header">Google</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
<div class="modal apple-modal" data-id="apple">
<div class="header">Apple</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
<div class="modal icon-modal" data-id="icon">
<div class="header">Icon</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>

I was able to implement what you want by adding the close modal functionality inside the click button and check if the modal for the current element is visible or not:
$(".button").on("click", function () {
const dataClose = $(this).attr("data-close");
const elem = $('[data-id="' + dataClose + '"]').length
? $('[data-id="' + dataClose + '"]')
: $(dataClose);
if (elem.hasClass("active") && elem.is(":visible")) {
elem.removeClass("active");
} else {
const id = $(this).prop("id");
$(".modal").each(function () {
$(this).toggleClass("active", $(this).data("id") == id);
});
}
});
$(document).on("click", function (e) {
if (
$(".apple-modal, .google-modal").hasClass("active") &&
!$(".modal, .modal *, .button").is(e.target)
) {
$(".modal").removeClass("active");
}
});
.buttons {
display: flex;
align-items: center;
}
.button {
height: 30px;
cursor: pointer;
border: 2px solid;
padding: 1rem;
font-size: 28px;
}
#icon {
color: silver;
}
.header {
height: 15px;
background: #eee;
}
.modal {
position: fixed;
top: 72px;
right: 15px;
z-index: 6;
opacity: 0;
visibility: hidden;
transform: scale(0.5);
transform-origin: top right;
transition: 0.15s;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.modal:after {
content: "";
width: 15px;
height: 15px;
background: inherit;
position: absolute;
background: #eee;
top: -6px;
right: 8px;
opacity: 0;
visibility: hidden;
transform: rotate(45deg) scale(0.5);
transition: 0.15s;
}
.modal.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.modal.active:after {
opacity: 1;
visibility: visible;
transform: rotate(45deg) scale(1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="buttons">
<img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button" id="google" data-close="google" />
<img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="button" id="apple" data-close="apple" />
<div class="button" id="icon" data-close="icon">
<i class="fas fa-bell"></i>
</div>
</div>
<div class="modal google-modal" data-id="google">
<div class="header">Google</div>
<ul>
<li>
First
</li>
<li>
Second
</li>
<li>
Third
</li>
</ul>
</div>
<div class="modal apple-modal" data-id="apple">
<div class="header">Apple</div>
<ul>
<li>
First
</li>
<li>
Second
</li>
<li>
Third
</li>
</ul>
</div>
<div class="modal icon-modal" data-id="icon">
<div class="header">Icon</div>
<ul>
<li>
First
</li>
<li>
Second
</li>
<li>
Third
</li>
</ul>
</div>

How can I execute HTML code with a Javascript for loop?

I am trying to create a page, where each film (from a database) is displayed in an image slider, I have managed to make the image slideshow but I am now attempting to repeat this code via a for loop, rather than add an individual film each time.
This is my code currently, without any for loops, I have attached my HTML and external css file
tml {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 10px;
/* remove scrollbar space */
background: transparent;
/* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
/*::-webkit-scrollbar-thumb {
background: #FF0000;
}*/
#wrapper {
max-width: 100%;
padding: 50px 75px 50px 45px;
position: relative;
bottom: 0em;
}
button:focus {
outline: 0 !important;
}
.left-controls {
position: absolute;
top: 0;
left: 0;
width: 4%;
height: 1000px;
z-index: 40;
/*background:#fff;*/
opacity: 1;
cursor: pointer;
text-align: center;
webkit justify-content: center;
justify-content: center;
display: webkit box;
display: webkit flex;
display: moz box;
display: ms flexbox;
display: flex;
color: #fff;
}
.fa-chevron-left-extra {
align-self: center;
position: relative;
height: auto;
top: -250px;
transform-origin: 55% 50%;
font-style: normal;
font-weight: 400;
line-height: 1;
font-variant: normal;
text-transform: none;
font-size: 2.5vw;
transition: transform .1s ease-out 0s;
transition-property: transform;
transition-duration: 0.1s;
transition-timing-function: ease-out;
transition-delay: 0s;
color: blue;
opacity: .1;
}
.right-controls {
position: absolute;
top: 0;
right: 0;
width: 4%;
height: 1000px;
z-index: 40;
/*background:#fff;*/
opacity: 1;
cursor: pointer;
text-align: center;
webkit justify content: center;
justify-content: center;
display: webkit box;
display: webkit flex;
display: moz box;
display: ms flexbox;
display: flex;
color: #fff;
}
.fa-chevron-right-extra {
align-self: center;
position: relative;
height: auto;
top: -250px;
transform-origin: 55% 50%;
font-style: normal;
font-weight: 400;
line-height: 1;
font-variant: normal;
text-transform: none;
font-size: 2.5vw;
transition: transform .1s ease-out 0s;
transition-property: transform;
transition-duration: 0.1s;
transition-timing-function: ease-out;
transition-delay: 0s;
color: blue;
opacity: .1;
}
.title {
color: #eee;
}
.module-section {
/*max-width: 100%;*/
overflow: hidden;
overflow-x: scroll;
/* border-left:1px solid #fff;
border-right:1px solid #fff;
*/
}
ul {
width: 600em;
list-style-type: none;
padding: 50px 0 50px 0;
}
#content {
position: relative;
}
/*
.arrow-guides, .arrow-guides:hover{
font-size:29px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
float:left;
position:relative;
top:80px;
left:-10px;
padding: 10px 5px 5px 2px;
background:#999;
color:#fff;
}
*/
/*
.arrow-guides-right, .arrow-guides-right:hover{
font-size:29px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
float:right;
position:relative;
bottom:185px;
right:-40px;
padding: 10px 2px 5px 5px;
background:#999;
color:#fff;
}
*/
.card {
width: 15em;
height: 350px;
background: mistyrose;
float: left;
margin-right: 10px;
margin-bottom: 50px;
cursor: pointer;
transform: scale(1);
visibility: visible;
-moz-box-shadow: 0px 1px 5px 0px #676767;
-webkit-box-shadow: 0px 1px 5px 0px #676767;
box-shadow: 0px 1px 5px 0px #676767;
}
.card:hover {
cursor: pointer;
transform: scale(1);
visibility: visible;
transition: all .2s ease-in-out;
transform: scale(1.1);
z-index: 100;
position: relative;
transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
transition-duration: 400ms;
}
.inside-top {
width: 14em;
height: 300px;
position: absolute;
text-align: center;
top: 0;
left: 0;
z-index: 100;
}
.clearfix {
overflow: auto;
zoom: 1;
}
<div id="wrapper">
<span id="controlL" class="left-controls" role="button" aria-label="See Previous Modules">
<b class="fa fa-chevron-left fa-chevron-left-extra" aria-hidden="true"></b>
</span>
<div class="module-section clearfix">
<!-- <button class="btn arrow-guides fa-chevron-left"></button> -->
<ul id="content">
<li class="card">
<div class="inside-top">
<input type="image" id="image" alt="1917" src="./Images/1.png">
<h4>1917</h4>
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/2.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/3.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/4.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/5.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/6.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/7.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/8.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/9.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/10.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/11.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/12.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/13.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/14.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/15.png">
</div>
</li>
</ul>
</div>
<!--end of module-section-->
<span id="controlR" class="right-controls" role="button" aria-label="See Previous Modules">
<b class="fa fa-chevron-right fa-chevron-right-extra" aria-hidden="true"></b>
</span>
<!-- <button class="btn arrow-guides-right fa-chevron-right"></button> -->
</div>

Assuming your data is stored in a variable called films like the following:
var films = [["1917", "1.png"], ["The Lion King", "2.png"], ["Parasite", "3.png"]];
you can loop through them like this:
var i, len, films, list;
for (i = 0, len = films.length, list=""; i < len; i++) {
list += "<li class='card'><div class='inside-top'><img src='http://yoursite/wherefilesare/" + films[i][1] + "' id='image-" + i + "><h4>" + films[i][0] + "</h4>";
}
then echo the list inside your unordered list:
document.getElementById("content").innerHTML = list;
Updated the code to add an ID to images. The ID will be "image-(number)" and will be unique to each image then you could do something like this:
document.getElementById("image-1").addEventListener("click", doSomethingMethod);

I think this would do. Do the changes if needed. Add this script in script tag.
const ul_tag = document.getElementById("content")
let list_of_images = ["1.png","2.png","3.png"] // so on ...
list_of_images.forEach( (image, index) => {
let card = document.createElement("li")
card.setAttribute("class", "card")
let div = document.createElement("div")
div.setAttribute("class", "inside-top")
card.appendChild(div)
let img_tag = document.createElement("img")
img_tag.setAttrbute("src", "./Images/"+image)
div.appendChild(img_tag)
ul_tag.appendChild(card)
})

Hi try this example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="dataOutput"></div>
</body>
<script>
data = [
{ name: "Alessio", surname: "Bardolino", age: "20" },
{ name: "Giovanni", surname: "Told", age: "32" },
{ name: "Sonia", surname: "Bin", age: "42" }
]
createTable(data);
function createTable(data) {
var htmlContents = "";
const app = document.getElementById('dataOutput');
data.forEach(resp => {
htmlContents += "<div class='container'>";
htmlContents += "<div><p class='name'>" + resp.name + "</p></div>";
htmlContents += "<div class='total'><p>" + resp.surname + "</p></div>";
htmlContents += "<div class='total'><p>" + resp.age + "</p></div>";
htmlContents += "</div>";
});
app.innerHTML = htmlContents;
}
</script>
</html>
I hope this help you!!!
Regards

In my example am loading from a JSON but you can equally do same with your DB.
<ul id="imageLoad"></ul>
<script>
var images = [
"https://images.unsplash.com/photo-1534067783941-51c9c23ecefd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1531804055935-76f44d7c3621?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1531702275836-8a2922d78491?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1523032217284-d9e49d6c5f04?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1534142499731-a32a99935397?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"];
var loadPhotos = "";
var i;
for (i = 0; i < images.length; i++) {
loadPhotos += "<li><img src=" + images[i] + " /></li>";
}
document.getElementById("imageLoad").innerHTML = loadPhotos;
</script>
Try let me know if this works and feel free to ask if you need clarification.

Categories

Resources