I need the refresh_button to appear and disappear only on mouseover/mouseout on the avatar(image).
I've build this functionality and it works, however, it appears on image hover + on span hover too.
Could you please spot what's wrong?
When I use the same code on .avatar class it doesn't work, I think the .r reference is null in that case. I need to use vanilla JavaScript.
Thank you
document.querySelectorAll(".tree").forEach(img => {
img.onmouseover = function () {
let refresh_button = img.querySelector(".r");
refresh_button.style.opacity = 1;
};
img.onmouseout = function () {
let refresh_button = img.querySelector(".r");
refresh_button.style.opacity = 0;
};
});
#no1 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
}
.container1 {
width: 580px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
text-align: center;
margin: auto;
}
.namefunc {
display: flex;
justify-content: center;
gap: 10px;
}
.name {
background: #beebb3;
border-color: #606f46;
border-radius: 22px 0 22px 0;
padding: 2px;
padding-bottom: 5px;
border-style: solid;
margin-top: 5px;
box-shadow: 4px 4px 13px #222;
width: 145px;
color: green;
}
.name_input {
background: #beebb3;
border: none;
text-align: center;
margin-left: 5px;
margin: 4px;
color: green;
}
.r {
background-image: url('img/refresh2.png');
background-size: contain;
}
.refresh {
outline: none;
width: 50px;
height: 50px;
border-radius: 100%;
position: absolute;
right: 3px;
top: 108px;
opacity: 0;
}
.tree {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
position: relative;
}
img {
border-radius: 100%;
width: 150px;
height: 150px;
box-shadow: 8px 8px 13px #222;
border: solid 3px #606f46;
}
<div class="container1">
<div id="no1">
<div class="tree">
<div class="avatar">
<img src="https://entertainment.time.com/wp-content/uploads/sites/3/2013/05/fictioninfluence_list_homersimpson.jpg">
</div>
<button id="btn1" class="refresh r"> </button>
<span id="spn1" class="name">
<input class="name_input" type="text" disabled="true" value="Homer Simpson">
<div class="namefunc">
<button class="check">Save</button>
<button class="close">Delete</button>
</div>
</span>
</div>
<div class="tree">
<div class="avatar">
<img class="white_bg" src="https://static.wikia.nocookie.net/theultimatesimpsons/images/0/0f/Marge-Simpson-icon.png/revision/latest?cb=20180210061653">
</div>
<button id="btn2" class="refresh r"></button>
<span id="spn2" class="name">
<input class="name_input" type="text" disabled="true" value="Marge Simpson">
<div class="namefunc">
<button class="check">Save</button>
<button class="close">Delete</button>
</div>
</span>
</div>
</div>
In the JS, just because you call the variable img doesn't mean that you are working with the image element, you are working with div.tree nodes.
Addendum: per OP "I need the button to not disappear when hovering over the image and then over the button"
Move the buttons inside .avatar and act on the avatar mouse events:
document.querySelectorAll(".tree").forEach(tn => {
let ava = tn.querySelector(".avatar");
let btn = tn.querySelector(".avatar .r");
ava.onmouseover = function() {
btn.style.opacity = 1;
};
ava.onmouseout = function() {
btn.style.opacity = 0;
};
});
#no1 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
}
.container1 {
width: 580px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
text-align: center;
margin: auto;
}
.namefunc {
display: flex;
justify-content: center;
gap: 10px;
}
.name {
background: #beebb3;
border-color: #606f46;
border-radius: 22px 0 22px 0;
padding: 2px;
padding-bottom: 5px;
border-style: solid;
margin-top: 5px;
box-shadow: 4px 4px 13px #222;
width: 145px;
color: green;
}
.name_input {
background: #beebb3;
border: none;
text-align: center;
margin-left: 5px;
margin: 4px;
color: green;
}
.r {
background-image: url('img/refresh2.png');
background-size: contain;
}
.refresh {
outline: none;
width: 50px;
height: 50px;
border-radius: 100%;
position: absolute;
right: 3px;
top: 108px;
opacity: 0;
}
.tree {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
position: relative;
}
img {
border-radius: 100%;
width: 150px;
height: 150px;
box-shadow: 8px 8px 13px #222;
border: solid 3px #606f46;
}
<div class="container1">
<div id="no1">
<div class="tree">
<div class="avatar">
<img src="https://entertainment.time.com/wp-content/uploads/sites/3/2013/05/fictioninfluence_list_homersimpson.jpg">
<button id="btn1" class="refresh r"> </button>
</div>
<span id="spn1" class="name">
<input class="name_input" type="text" disabled="true" value="Homer Simpson">
<div class="namefunc">
<button class="check">Save</button>
<button class="close">Delete</button>
</div>
</span>
</div>
<div class="tree">
<div class="avatar">
<img class="white_bg" src="https://static.wikia.nocookie.net/theultimatesimpsons/images/0/0f/Marge-Simpson-icon.png/revision/latest?cb=20180210061653">
<button id="btn2" class="refresh r"></button>
</div>
<span id="spn2" class="name">
<input class="name_input" type="text" disabled="true" value="Marge Simpson">
<div class="namefunc">
<button class="check">Save</button>
<button class="close">Delete</button>
</div>
</span>
</div>
</div>
Your .forEach loop is iterating over your div.tree elements and then adding mouseover and mouseout event handlers to those div elements, rather than looping over the actual img elements within the div.tree elements.
You also should really be using the modern .addEventListener() method to set up event callbacks, which is more powerful than using event properties, such as onmouseover and onmouseout.
document.querySelectorAll(".tree img").forEach(img => {
img.addEventListener("mouseover", function () {
img.closest(".tree").querySelector(".r").style.opacity = 1;
});
img.addEventListener("mouseout", function () {
img.closest(".tree").querySelector(".r").style.opacity = 0;
});
});
#no1 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
}
.container1 {
width: 580px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
text-align: center;
margin: auto;
}
.namefunc {
display: flex;
justify-content: center;
gap: 10px;
}
.name {
background: #beebb3;
border-color: #606f46;
border-radius: 22px 0 22px 0;
padding: 2px;
padding-bottom: 5px;
border-style: solid;
margin-top: 5px;
box-shadow: 4px 4px 13px #222;
width: 145px;
color: green;
}
.name_input {
background: #beebb3;
border: none;
text-align: center;
margin-left: 5px;
margin: 4px;
color: green;
}
.r {
background-image: url('img/refresh2.png');
background-size: contain;
}
.refresh {
outline: none;
width: 50px;
height: 50px;
border-radius: 100%;
position: absolute;
right: 3px;
top: 108px;
opacity: 0;
}
.tree {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
position: relative;
}
img {
border-radius: 100%;
width: 150px;
height: 150px;
box-shadow: 8px 8px 13px #222;
border: solid 3px #606f46;
}
<div class="container1">
<div id="no1">
<div class="tree">
<div class="avatar">
<img src="https://entertainment.time.com/wp-content/uploads/sites/3/2013/05/fictioninfluence_list_homersimpson.jpg">
</div>
<button id="btn1" class="refresh r"> </button>
<span id="spn1" class="name">
<input class="name_input" type="text" disabled="true" value="Homer Simpson">
<div class="namefunc">
<button class="check">Save</button>
<button class="close">Delete</button>
</div>
</span>
</div>
<div class="tree">
<div class="avatar">
<img class="white_bg" src="https://static.wikia.nocookie.net/theultimatesimpsons/images/0/0f/Marge-Simpson-icon.png/revision/latest?cb=20180210061653">
</div>
<button id="btn2" class="refresh r"></button>
<span id="spn2" class="name">
<input class="name_input" type="text" disabled="true" value="Marge Simpson">
<div class="namefunc">
<button class="check">Save</button>
<button class="close">Delete</button>
</div>
</span>
</div>
</div>
Use .avatar selector and nextElementSibling to get refresh button
document.querySelectorAll(".tree .avatar").forEach(img => {
img.onmouseover = function () {
let refresh_button = img.nextElementSibling;
refresh_button.style.opacity = 1;
};
img.onmouseout = function () {
let refresh_button = img.nextElementSibling;
refresh_button.style.opacity = 0;
};
});
document.querySelectorAll(".tree .avatar").forEach(img => {
img.onmouseover = function () {
let refresh_button = img.nextElementSibling;
refresh_button.style.opacity = 1;
};
img.onmouseout = function () {
let refresh_button = img.nextElementSibling;
refresh_button.style.opacity = 0;
};
});
#no1 {
display: flex;
justify-content: center;
width: 190px;
line-height: 16px;
margin: auto;
}
.container1 {
width: 580px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
text-align: center;
margin: auto;
}
.namefunc {
display: flex;
justify-content: center;
gap: 10px;
}
.name {
background: #beebb3;
border-color: #606f46;
border-radius: 22px 0 22px 0;
padding: 2px;
padding-bottom: 5px;
border-style: solid;
margin-top: 5px;
box-shadow: 4px 4px 13px #222;
width: 145px;
color: green;
}
.name_input {
background: #beebb3;
border: none;
text-align: center;
margin-left: 5px;
margin: 4px;
color: green;
}
.r {
background-image: url('img/refresh2.png');
background-size: contain;
}
.refresh {
outline: none;
width: 50px;
height: 50px;
border-radius: 100%;
position: absolute;
right: 3px;
top: 108px;
opacity: 0;
}
.tree {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px;
position: relative;
}
img {
border-radius: 100%;
width: 150px;
height: 150px;
box-shadow: 8px 8px 13px #222;
border: solid 3px #606f46;
}
<div class="container1">
<div id="no1">
<div class="tree">
<div class="avatar">
<img src="https://entertainment.time.com/wp-content/uploads/sites/3/2013/05/fictioninfluence_list_homersimpson.jpg">
</div>
<button id="btn1" class="refresh r"> </button>
<span id="spn1" class="name">
<input class="name_input" type="text" disabled="true" value="Homer Simpson">
<div class="namefunc">
<button class="check">Save</button>
<button class="close">Delete</button>
</div>
</span>
</div>
<div class="tree">
<div class="avatar">
<img class="white_bg" src="https://static.wikia.nocookie.net/theultimatesimpsons/images/0/0f/Marge-Simpson-icon.png/revision/latest?cb=20180210061653">
</div>
<button id="btn2" class="refresh r"></button>
<span id="spn2" class="name">
<input class="name_input" type="text" disabled="true" value="Marge Simpson">
<div class="namefunc">
<button class="check">Save</button>
<button class="close">Delete</button>
</div>
</span>
</div>
</div>
Related
const msgg = document.getElementById("msgg");
const iaup = document.getElementById("iaup");
const iado = document.getElementById("iado");
const msgc = document.getElementById("msgc");
const msgarea = document.getElementById("msgarea");
const nmsg = document.getElementById("nmsg")
function sMessages1() {
msgg.classList.toggle("messageBox2");
iaup.classList.toggle("vdn");
iado.classList.toggle("vib");
msgarea.classList.toggle("vib")
}
body {
background-color: rgba(0,0,0,0.5);
}
.messageBox {
border-radius: 10px;
position: fixed;
right: 5%;
bottom: 0px;
width: 250px;
height: 40px;
transition: 200ms;
}
.messageBox2 {
bottom: 100px;
border-radius: 10px;
position: fixed;
right: 5%;
width: 300px;
height: 40px;
}
.messageContainer {
border: 1px solid lightgray;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
cursor: pointer;
}
.messageText {
padding-left: 12px;
font-size: 16px;
}
.Icons {
display: flex;
position: relative;
padding-right: 12px;
}
.iconMessage {
display: flex;
align-items: center;
border-radius: 50%;
padding: 6px 7px;
margin-right: 20px;
cursor: pointer;
}
.iconMessage:hover {
color: darkorange;
background-color: rgba(255,165,0,0.1);
}
.iconMoreMessage {
display: flex;
align-items: center;
border-radius: 50%;
padding: 0px 7px;
}
.iconMoreMessage:hover {
color: darkorange;
background-color: rgba(255,165,0,0.1);
}
.messageArea {
display: none;
border-right: 1px solid lightgray;
border-bottom: 1px solid lightgray;
border-left: 1px solid lightgray;
width: 300px;
height: 100px;
background-color: white;
}
.vdn {
display: none !important;
}
.vib {
display: inline-block !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css"/>
<div class="messageBox" id="msgg">
<div class="messageContainer" id="msgc" onclick="sMessages1()">
<div class="messageText">
Messages
</div>
<div class="Icons">
<div class="iconMessage" id="nmsg">
<i class="fa-solid fa-envelope" style="font-size: 13px;color: pink;"></i>
<i class="fa-solid fa-plus" style="font-size: 9px;font-weight: bolder;position: absolute;left: 18px;top: 0px;"></i>
</div>
<div class="iconMoreMessage">
<i class="fa-solid fa-angle-up" id="iaup" style="font-size: 13px;"></i>
<i class="fa-solid fa-angle-down" id="iado" style="font-size: 13px;display: none;"></i>
</div>
</div>
</div>
<div class="messageArea" id="msgarea">
</div>
</div>
I've tried to make a message box. For now the only thing i want to fix is the new message button/div/icon.
When i click new message button its opening as i wanted. After clicking that button message box must open, so that you can send message to someone. But after when i click new message button again message box is closing. But i do not want it to close. It must work as i said before like sending message to others.
You are looking for stopPropagation
nmsg.addEventListener('click', e => {
e.stopPropagation()
})
const msgg = document.getElementById("msgg");
const iaup = document.getElementById("iaup");
const iado = document.getElementById("iado");
const msgc = document.getElementById("msgc");
const msgarea = document.getElementById("msgarea");
const nmsg = document.getElementById("nmsg")
function sMessages1() {
msgg.classList.toggle("messageBox2");
iaup.classList.toggle("vdn");
iado.classList.toggle("vib");
msgarea.classList.toggle("vib")
}
nmsg.addEventListener('click', e => {
e.stopPropagation()
})
body {
background-color: rgba(0, 0, 0, 0.5);
}
.messageBox {
border-radius: 10px;
position: fixed;
right: 5%;
bottom: 0px;
width: 250px;
height: 40px;
transition: 200ms;
}
.messageBox2 {
bottom: 100px;
border-radius: 10px;
position: fixed;
right: 5%;
width: 300px;
height: 40px;
}
.messageContainer {
border: 1px solid lightgray;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
cursor: pointer;
}
.messageText {
padding-left: 12px;
font-size: 16px;
}
.Icons {
display: flex;
position: relative;
padding-right: 12px;
}
.iconMessage {
display: flex;
align-items: center;
border-radius: 50%;
padding: 6px 7px;
margin-right: 20px;
cursor: pointer;
}
.iconMessage:hover {
color: darkorange;
background-color: rgba(255, 165, 0, 0.1);
}
.iconMoreMessage {
display: flex;
align-items: center;
border-radius: 50%;
padding: 0px 7px;
}
.iconMoreMessage:hover {
color: darkorange;
background-color: rgba(255, 165, 0, 0.1);
}
.messageArea {
display: none;
border-right: 1px solid lightgray;
border-bottom: 1px solid lightgray;
border-left: 1px solid lightgray;
width: 300px;
height: 100px;
background-color: white;
}
.vdn {
display: none !important;
}
.vib {
display: inline-block !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" />
<div class="messageBox" id="msgg">
<div class="messageContainer" id="msgc" onclick="sMessages1()">
<div class="messageText">
Messages
</div>
<div class="Icons">
<div class="iconMessage" id="nmsg">
<i class="fa-solid fa-envelope" style="font-size: 13px;color: pink;"></i>
<i class="fa-solid fa-plus" style="font-size: 9px;font-weight: bolder;position: absolute;left: 18px;top: 0px;"></i>
</div>
<div class="iconMoreMessage">
<i class="fa-solid fa-angle-up" id="iaup" style="font-size: 13px;"></i>
<i class="fa-solid fa-angle-down" id="iado" style="font-size: 13px;display: none;"></i>
</div>
</div>
</div>
<div class="messageArea" id="msgarea">
</div>
</div>
I'm trying to make a form for adding a blog page.
I have title form, date form, content form, checkbox for blog category form and image form for the topic image.
When I try to fill the form, only the 3 of the 4 checkbox forms that worked and when I click upload image it won't show the file selector.
Here's the screenshot:
Form screenshot
This is what I'm trying to achieve:
Form screenshot
I've tried to browse for solution but my English isn't very good for browsing, I don't know the keyword to search for the solution.
Please help, I've stuck on this for 3 hours.
Here's the full code:
let blogs = []
function addBlog(event) {
event.preventDefault()
let inputName = document.getElementById("inputProjectName").value
let inputContent = document.getElementById("inputDescription").value
let inputImage = document.getElementById("inputImage")
const projectDate = {
startDate: document.getElementById("inputStartDate").value,
endDate: document.getElementById("inputEndDate").value
}
image = URL.createObjectURL(image.files[0])
let cardIcons = {
html: document.querySelector('input[name="checkHtml"]').checked,
css: document.querySelector('input[name="checkCss"]').checked,
nodeJs: document.querySelector('input[name="checkNode"]').checked,
reactJs: document.querySelector('input[name="checkReact"]').checked
}
let blog = {
title: inputName,
date: projectDate,
content: inputContent,
icons: cardIcons,
image: inputImage
}
blogs.push(blog)
console.table(blogs)
}
/* FORM */
.mpi-title {
width: 100%;
margin: 50px 0px;
font-size: 30px;
text-align: center;
font-family: 'Lato', sans-serif !important;
font-weight: 700;
}
.mpi-form-container {
display: flex;
justify-content: center;
}
.mpi-form {
width: 540px;
display: flex;
justify-content: center;
}
.mpi-form label {
font-size: 25px;
font-weight: bold;
}
.mpi-form .mpi-name input,
.mpi-date input {
width: 100%;
height: 50px;
padding: 5px;
box-sizing: border-box;
font-size: 20px;
font-weight: 400;
padding-bottom: 5px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
border-radius: 8px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.mpi-date {
flex-grow: 1;
display: flex;
gap: 10px;
}
.mpi-date .date-start {
flex: 50%;
}
.mpi-date .date-end {
flex: 50%;
}
[type="date"]::-webkit-datetime-edit {
opacity: 0;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
width: 100%;
}
.mpi-desc textarea {
width: 100%;
font-size: 20px;
font-weight: 400;
padding: 8px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
box-sizing: border-box;
border-radius: 8px;
height: 200px;
}
.mpi-check {
display: flex;
gap: 120px;
margin: 20px 0px;
}
.mpi-check label {
font-size: 20px;
}
.check-left {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-right {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-label {
display: block;
position: relative;
padding-left: 35px;
color: #514a4a;
margin-bottom: 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.check-label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: white;
border-radius: 5px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.check-label:hover input~.checkmark {
background-color: #ccc;
}
.check-label input:checked~.checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.check-label input:checked~.checkmark:after {
display: block;
}
.check-label .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.mpi-image {
overflow: hidden;
height: 50px;
width: 100%;
font-size: 20px;
font-weight: 400;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 20px;
background: #f4f3f3;
border: 1px solid #c4c4c4;
border-radius: 8px;
cursor: pointer;
padding-right: 8px;
box-shadow: 0 10px 10px rgb(0 0 0 / 26%);
}
.mpi-image label {
width: 100%;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}
.mpi-choose {
margin-top: -2px;
border-radius: 8px;
align-items: center;
padding: 13px 10px 13px 10px;
background-color: #e4e4e4;
color: #b2abab;
}
.mpi-attach {
padding-right: 10px;
}
.mpi-submit button {
margin-top: 30px;
float: right;
padding: 10px 30px;
border: none;
border-radius: 25px;
background-color: var(--btn);
color: white;
font-size: 15px;
font-weight: bold;
cursor: pointer;
margin-bottom: 110px;
}
.mpi-submit button:hover {
background-color: var(--btn-hover)
}
/* x FORM */
<div class="mpi-form">
<!--MP = My Project Input-->
<form onsubmit="addBlog(event)">
<div class="mpi-name">
<label for="inputProjectName">Project Name</label>
<input type="text" id="inputProjectName">
</div>
<div class="mpi-date">
<div class="date-start">
<label for="inputStartDate">Start Date</label>
<input type="date" id="inputStartDate">
</div>
<div class="date-end">
<label for="inputEndDate">End Date</label>
<input type="date" id="inputEndDate">
</div>
</div>
<div class="mpi-desc">
<label for="inputDescription">Description</label>
<textarea name="inputDescription" id="inputDescription"></textarea>
</div>
<div class="mpi-check-cont">
<label for="checkTitle">Technologies</label>
<div class="mpi-check">
<div class="check-left">
<div>
<label for="checkHtml" class="check-label">HTML
<input type="checkbox" id="checkHtml" name="checkHtml"check>
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkNode" class="check-label">Node Js
<input type="checkbox" id="checkNode" name="checkNode">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="check-right">
<div>
<label for="checkCss" class="check-label">CSS
<input type="checkbox" id="checkCss" name="checkCss">
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="reactJs" class="check-label">React Js
<input type="checkbox" id="checkReact" name="checkReact">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class="mpi-image">
<label for="input-blog-image">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" hidden />
</div>
</div>
<div class="mpi-submit">
<button type="submit">Submit</button>
</div>
</form>
Thanks
The very first mistake is you have added different id than for
<label for="reactJs" class="check-label">React Js
<input type="checkbox" id="checkReact" name="checkReact">
<span class="checkmark"></span>
</label>
Here for value is reactJs but input id is checkReact
Second mistake is same as above
<label for="input-blog-image">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" hidden />
label for value is input-blog-image but input id is inputImage
Make those changes, will work fine.
let blogs = []
function addBlog(event) {
event.preventDefault()
let inputName = document.getElementById("inputProjectName").value
let inputContent = document.getElementById("inputDescription").value
let inputImage = document.getElementById("inputImage")
const projectDate = {
startDate: document.getElementById("inputStartDate").value,
endDate: document.getElementById("inputEndDate").value
}
image = URL.createObjectURL(image.files[0])
let cardIcons = {
html: document.querySelector('input[name="checkHtml"]').checked,
css: document.querySelector('input[name="checkCss"]').checked,
nodeJs: document.querySelector('input[name="checkNode"]').checked,
reactJs: document.querySelector('input[name="checkReact"]').checked
}
let blog = {
title: inputName,
date: projectDate,
content: inputContent,
icons: cardIcons,
image: inputImage
}
blogs.push(blog)
console.table(blogs)
}
mpi-title {
width: 100%;
margin: 50px 0px;
font-size: 30px;
text-align: center;
font-family: 'Lato', sans-serif !important;
font-weight: 700;
}
.mpi-form-container {
display: flex;
justify-content: center;
}
.mpi-form {
width: 540px;
display: flex;
justify-content: center;
}
.mpi-form label {
font-size: 25px;
font-weight: bold;
}
.mpi-form .mpi-name input,
.mpi-date input {
width: 100%;
height: 50px;
padding: 5px;
box-sizing: border-box;
font-size: 20px;
font-weight: 400;
padding-bottom: 5px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
border-radius: 8px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.mpi-date {
flex-grow: 1;
display: flex;
gap: 10px;
}
.mpi-date .date-start {
flex: 50%;
}
.mpi-date .date-end {
flex: 50%;
}
[type="date"]::-webkit-datetime-edit {
opacity: 0;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
width: 100%;
}
.mpi-desc textarea {
width: 100%;
font-size: 20px;
font-weight: 400;
padding: 8px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
box-sizing: border-box;
border-radius: 8px;
height: 200px;
}
.mpi-check {
display: flex;
gap: 120px;
margin: 20px 0px;
}
.mpi-check label {
font-size: 20px;
}
.check-left {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-right {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-label {
display: block;
position: relative;
padding-left: 35px;
color: #514a4a;
margin-bottom: 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.check-label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: white;
border-radius: 5px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.check-label:hover input~.checkmark {
background-color: #ccc;
}
.check-label input:checked~.checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.check-label input:checked~.checkmark:after {
display: block;
}
.check-label .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.mpi-image {
overflow: hidden;
height: 50px;
width: 100%;
font-size: 20px;
font-weight: 400;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 20px;
background: #f4f3f3;
border: 1px solid #c4c4c4;
border-radius: 8px;
cursor: pointer;
padding-right: 8px;
box-shadow: 0 10px 10px rgb(0 0 0 / 26%);
}
.mpi-image label {
width: 100%;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}
.mpi-choose {
margin-top: -2px;
border-radius: 8px;
align-items: center;
padding: 13px 10px 13px 10px;
background-color: #e4e4e4;
color: #b2abab;
}
.mpi-attach {
padding-right: 10px;
}
.mpi-submit button {
margin-top: 30px;
float: right;
padding: 10px 30px;
border: none;
border-radius: 25px;
background-color: var(--btn);
color: white;
font-size: 15px;
font-weight: bold;
cursor: pointer;
margin-bottom: 110px;
}
.mpi-submit button:hover {
background-color: var(--btn-hover)
}
<form onsubmit="addBlog(event)">
<div class="mpi-name">
<label for="inputProjectName">Project Name</label>
<input type="text" id="inputProjectName">
</div>
<div class="mpi-date">
<div class="date-start">
<label for="inputStartDate">Start Date</label>
<input type="date" id="inputStartDate">
</div>
<div class="date-end">
<label for="inputEndDate">End Date</label>
<input type="date" id="inputEndDate">
</div>
</div>
<div class="mpi-desc">
<label for="inputDescription">Description</label>
<textarea name="inputDescription" id="inputDescription"></textarea>
</div>
<div class="mpi-check-cont">
<label for="checkTitle">Technologies</label>
<div class="mpi-check">
<div class="check-left">
<div>
<label for="checkHtml" class="check-label">HTML
<input type="checkbox" id="checkHtml" name="checkHtml"check>
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkNode" class="check-label">Node Js
<input type="checkbox" id="checkNode" name="checkNode">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="check-right">
<div>
<label for="checkCss" class="check-label">CSS
<input type="checkbox" id="checkCss" name="checkCss">
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="reactJs" class="check-label">React Js
<input type="checkbox" id="reactJs" name="checkReact">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class="mpi-image">
<label for="input-blog-image">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="input-blog-image" hidden />
</div>
</div>
<div class="mpi-submit">
<button type="submit">Submit</button>
</div>
</form>
The problem is the wrong value for the for attribute on two label elements. These are:
<label for="reactJs" class="check-label">
<label for="input-blog-image">
And the correct values would be:
<label for="checkReact" class="check-label">
<label for="inputImage">
I'm trying to append the picture that inserted, so it can be viewed.
So here the code where i can input or insert the picture :
<style>
body {
height: 100%;
padding: 0;
margin: 0;
background-color: white;
max-width: 1920px;
}
.main-container {
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
background-image: url('/img/');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.listing-container {
width: 60%;
padding: 30px;
margin: auto;
border-radius: 35px;
box-shadow: 0px 0px 7px #00000029;
background-color: white;
}
.input-credential {
color: #3C58A7;
}
.form-label {
margin-left: 15px;
font-size: 25px;
font-family: Montserrat-Bold;
}
.question-mark {
color: #3C58A7;
}
.question-mark:hover {
cursor: pointer;
}
.form-control {
font-family: Montserrat-Regular;
}
.input-border {
padding-bottom: 15px;
padding-top: 15px;
border-radius: 25px;
box-shadow: 0px 0px 5px #00000029;
}
.error-message {
font-size: 16px;
color: red;
padding: 15px 12px;
font-family: Montserrat-Regular;
}
.input-gambar {
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
#input-gambar-text {
padding-left: 42.5%;
color: #3C58A7;
}
#input-gambar-text:hover {
color: rgb(103, 99, 99);
}
.grid {
margin-top: 50px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 20px;
}
.grid .form-element {
width: 200px;
height: 200px;
box-shadow: 0px 0px 20px 5px rgba(100, 100, 100, 0.1);
}
.grid .form-element input {
display: none;
}
.grid .form-element img {
width: 200px;
height: 200px;
}
.grid .form-element div {
position: relative;
height: 40px;
margin-top: -40px;
background: rgba(0, 0, 0, 0.5);
text-align: center;
line-height: 40px;
font-size: 13px;
color: #f5f5f5;
font-weight: 600;
}
.grid .form-element div span {
font-size: 40px;
}
#tombol-cancel-gambar {
margin: auto;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 25px;
color: white;
font-size: 25px;
background-color: #3C58A7;
border-radius: 45px;
border-color: #3C58A7;
font-family: Montserrat-Bold;
align-items: center;
display: flex;
}
#tombol-cancel-gambar:hover {
color: #3C58A7;
background-color: white;
border-color: #3C58A7;
}
</style>
<body>
<div class="main-container">
<div class="listing-container">
<div class="row">
<div class="col-lg-12">
<div class="mb-3 input-credential">
<label class="form-label" for="myfile">
Masukkan Gambar
<span class="question-mark" data-toggle="tooltip" data-placement="bottom" title="Masukkan gambar produk anda">
<i class="fas fa-question-circle"></i>
</span>
</label>
<div class="grid" id="preview_test1">
<div class="form-element" id="test1">
<input type="file" id="file-1" accept="image/*" multiple>
<label for="file-1" id="file-1-preview">
<img src="/img/insert_gambar_penambahan_listing_barang.jpg" alt="" id="size-preview-image">
<div>
<span>+</span>
</div>
</label>
</div>
</div>
<div id="preview_test2">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
And this is the function that i used to show multiple picture that i inserted :
function cancel_form_data_gambar() {
$("#preview_test1").empty();
$("#preview_test2").empty();
$("#preview_test1").append('<div class="form-element" id="test1"></div>');
$("#test1").append('<input type="file" id="file-1" accept="image/*" multiple>');
$("#test1").append('<label for="file-1" id="file-1-preview"></label>');
$("#file-1-preview").append('<img src="/img/insert_gambar_penambahan_listing_barang.jpg" alt="" id="size-preview-image">');
$("#file-1-preview").append('<div> <span>+</span> </div>');
}
function readURL(input) {
$("#preview_test1").empty();
for (var i = 0; i < input.length; i++) {
$("#preview_test2").append('<img id="test_gambar' + i + '"src="#">');
}
for (var i = 0; i < input.length; i++) {
if (input.files && input.files[i]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#test_gambar' + i + '').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[i]);
}
}
$('#preview_test2').append('<button type="button" id="tombol-cancel-gambar" onclick="cancel_form_data_gambar()" class="btn btn-primary listing-button">Cancel Gambar</button>');
}
$("#file-1").change(function() {
readURL(this);
});
the picture is suppose to be showed in id="#preview_test2" after the picture was inserted. But the picture won't appear in id="#preview_test2" and only the button appear in there. So, how can i solve it?
So I have been following this youtube tutorial on how to create a login/sign up form and I've run into a problem. Whilst coding the JS, I tried testing out the continue button without any values submitted into the input groups, and nothing happened. So I went to check the console and I was met with this error message, "Uncaught TypeError: Cannot set property 'textContent' of null". The error occurs around the 'messageElement.textContent = message;' area. Any help would be greatly appreciated.
function setFormMessage(formElement, type, message) {
const messageElement = formElement.querySelector(".form__message");
messageElement.textContent = message;
messageElement.classList.remove("form__message--success", "form__message--error");
messageElement.classList.add(`form__message--${type}`);
}
function setInputError(inputElement, message) {
inputElement.classList.add("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = message;
}
function clearInputError(inputElement) {
inputElement.classList.remove("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = "";
}
document.addEventListener("DOMContentLoaded", () => {
const loginForm = document.querySelector("#login");
const createAccountForm = document.querySelector("#createAccount");
document.querySelector("#linkCreateAccount").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
});
document.querySelector("#linkLogin").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.remove("form--hidden");
createAccountForm.classList.add("form--hidden");
});
loginForm.addEventListener("submit", e => {
e.preventDefault();
// Perform your AJAX/Fetch login
setFormMessage(loginForm, "error", "Invalid username/password combination");
});
document.querySelectorAll(".form__input").forEach(inputElement => {
inputElement.addEventListener("blur", e => {
if (e.target.id === "signupUsername" && e.target.value.length > 0 && e.target.value.length < 10) {
setInputError(inputElement, "Username must be at least 10 characters in length");
}
});
inputElement.addEventListener("input", () => {
clearInputError(inputElement);
});
});
});
#import url('https://fonts.googleapis.com/css2?family=Belleza&display=swap') * {
box-sizing: border-box;
}
/*Navugation Bar*/
nav {
z-index: 1;
height: 120px;
background: black;
box-shadow: grey;
overflow: hidden;
background-color: black;
position: sticky;
top: 0;
width: 100%;
}
nav ul {
float: centre;
text-align: center;
}
nav ul li {
display: inline-block;
line-height: 0px;
margin: 0px 15px;
padding: 30px;
}
nav ul li a {
position: sticky;
color: grey;
font-size: 20px;
text-transform: uppercase;
padding: 50px;
text-decoration: none;
width: 100px;
}
nav ul li a:hover {
color: white;
font-size: 30px
}
/*Home Page*/
.header-image {
padding: 0px;
position: sticky;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
width: 100%;
background-color: black;
height: 290px
}
#Home-page {
font-size: 2em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
.first-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 10px solid;
color: grey;
padding: 50px;
margin-top: 20%;
margin-bottom: 30%;
}
.first-container-h1 {
color: white;
text-align: center;
font-size: 4em;
border-bottom: 20px solid white;
}
.first-container-h2 {
color: white;
text-align: center;
font-size: 4em;
}
#second-container-main {
width: 80%;
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
.second-container-title {
background: white;
text-align: center;
font-size: 40px;
height: 6pc;
line-height: 90px;
}
.second-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 2px solid;
color: grey;
padding: 50px;
font-size: 20px;
}
.second-container:hover {
font-size: 1em;
color: white;
}
.logo {
float: center;
width: 20%;
float: center;
text-align: center;
color: white;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
background-color: black;
height: 100px;
border: none
}
/* Footer*/
.footer-wrapper {
width: 100%;
margin: 0 auto;
display: block;
}
footer {
width: 100%;
height: 300px;
float: right;
text-align: center;
position: relative;
bottom: 0;
background-color: black;
}
/*About Page*/
.About-me-page-header {
font-size: 1em;
margin: 0;
background-position: center;
background-size: cover;
background-color: grey;
position: relative;
text-align: left;
padding-top: 50px;
padding-left: 50px;
height: 400px;
border: white 10px solid;
background-color: rgb(0, 0, 0, .7);
color: white;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
#About-page {
font-size: 1em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#About-page-main {
width: 80%;
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
.About-page-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 2px solid;
color: grey;
padding: 50px;
font-size: 1em;
}
.About-page-container:hover {
font-size: 30px;
color: white;
}
.about-page-title {
background: white;
text-align: center;
font-size: 40px;
height: 6pc;
line-height: 90px;
}
.AB-container-h {
color: white;
text-align: center;
}
/* Resources*/
.R-first-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 10px solid;
color: grey;
padding: 50px;
margin-top: 20%;
margin-bottom: 30%;
}
.R-first-container-h1 {
color: white;
text-align: center;
font-size: 4em;
}
/*Login Page*/
.About-me-page-header {
font-size: 1em;
margin: 0;
background-position: center;
background-size: cover;
background-color: grey;
position: relative;
text-align: left;
padding-top: 50px;
padding-left: 50px;
height: 400px;
border: white 10px solid;
background-color: rgb(0, 0, 0, .7);
color: white
}
#About-page {
font-size: 1em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#About-page-main {
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
/* Login in and Sign Up Form*/
#Login-page {
font-size: 2em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#Login-page-main {
--color-primary-dark: #009579;
--color-primary-dark: #007f67;
--color-secondary: #252c6a;
--color-primary-dark: #cc3333;
--color-success: #4bb544;
--color-error: red;
border-radius: 4px;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
max-width: 400px;
margin: 2rem;
padding: 5rem;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
border-radius: var(--border-radius);
background-color: rgba(0, 0, 0, .7);
color: white;
border: 3px solid white;
width: 1000px
}
.form--hidden {
display: none
}
.form>*:firstchild {
margin-top: 0;
}
.form>*:lastchild {
margin-bottom: 0;
}
.form__title {
margin-bottom: 2rem;
text-align: center;
font-size: 3rem;
}
.form__message {
margin-bottom: 1rem;
}
.form__message--success {
color: var(--color-success);
}
.form__message--error {
text-align: center;
color: var(--color-error);
}
.form__input-group {
margin-bottom: 2rem;
}
input,
select,
textarea {
color: white;
}
.form__input-error-message {
color: var(--color-error);
border-bottom: var(--color-error)
}
.form__input-error-message {
margin-top: 2rem;
font-size: 1.5rem;
color: var(--color-error);
}
.form__button {
width: 100%;
padding: 1rem 2rem;
font-weight: bold;
font-size: 1.1rem;
color: white;
background-color: rgb(0, 0, 0, .7);
outline: none;
cursor: pointer;
border: none;
border-radius: 20px
}
.form__button:hover {
background-color: white;
color: black
}
.form__button:active {
transform: scale(0.98)
}
.form__text {
font-size: 20px;
text-align: center;
cursor: pointer;
}
.form-text,
.form-textarea {
border-style: none;
}
.form__link {
text-decoration: none;
color: white
}
.form__link:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clarte Mentale - Login</title>
<link rel="stylesheet" href="Style.css" />
</head>
<body id="Login-page">
<div class="header-image">
<a href="Home.html">
<img src="Website Header.png">
</a>
</div>
<nav>
<ul>
<li>Welcome</li>
<li>About</li>
<li>Resources</li>
<li>Login</li>
</ul>
</nav>
<div class="About-me-page-header">
<h1 style="font-size:48px">Login Page</h1>
<p style="font-size:35px">
Contents:
</p>
<ul style="font-size:25px">
<li>Login</li>
<li>Sign Up</li>
</ul>
</div>
<main id="Login-page-main">
<div class="container">
<div class="form-container">
<!-- Login FormUp Form-->
<form class="form" id="login">
<h1 class="form__title">Login</h1>
<div class="form__messsage form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or Email" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text" style="margin-top: 35px;">
<a class="form__link" id="linkCreateAccount">Don't have an account? Create account</a>
</p>
</form>
<!-- Sign Up Form-->
<form class="form form--hidden" id="createAccount">
<h1 class="form__title">Create Account</h1>
<div class="form__messsage form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Email" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Confirm password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text" style="margin-top: 35px;">
<a class="form__link" id="linkLogin">Already have an account? Sign</a>
</p>
</form>
</main>
<footer>
<button class="logo" class="footer-wrapper" onclick="topFunction()" id="myBtn" title="Go to top">
<img src="Logo.png">
</button>
</footer>
<script src="Javascript.js"></script>
<script src="Login.js"></script>
</body>
</html>
You have <div class="form__messsage ... "> instead of <div class="form__message ... ">. Fixing that should work. GL.
Try and replace DomContentLoaded with load
I'm setting up a reddit-like commenting system on my website. Every comments has a little button in the right corner that collapses the comment.
I have the comment collapse by JQuery toggleClass.
$(".button").click(function() {
$('.bottomtext').toggleClass('bottomtext-small');
$('.upvote').toggleClass('upvote-small');
$('.downvote').toggleClass('downvote-small');
$('.main-content').toggleClass('main-content-small');
$('.button').toggleClass('button-small');
});
The comment collapsing works fine on one comment, but since I toggle the class, every comment collapses. How can I only affect the comment which button I am clicking?
JSFiddle: https://jsfiddle.net/j765rkpc/7/
It seems that you need to get the elements that have those class names and are part of the same post as the clicked button, here is how you can do that:
$(".button").click(function() {
const $post = $(this).closest('.post-container');
$post.find('.bottomtext').toggleClass('bottomtext-small');
$post.find('.upvote').toggleClass('upvote-small');
$post.find('.downvote').toggleClass('downvote-small');
$post.find('.main-content').toggleClass('main-content-small');
$post.find('.button').toggleClass('button-small');
});
.post-container {
background-color: yellow;
margin: auto;
position: relative;
display: flex;
width: 75%;
max-width: 1440px;
}
/*left side*/
.left-side {
position: relative;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50px;
max-width: 50px;
min-width: 50px;
background: lightblue;
padding-left: 5px;
padding-right: 5px;
}
/*main post*/
.post {
margin: 0;
padding: 0;
flex-grow: 1;
}
.main-content p {
margin: 0;
padding: 0;
padding: 10px;
}
.main-content {
margin: 0;
padding: 0;
flex-grow: 1;
}
.contain img {
width: 50%;
}
.toptext {
margin: 0;
padding: 0;
padding-top: 10px;
padding-left: 10px;
height: 20px;
color: #808486;
font-size: 12px;
background-color: lightgrey;
}
.bottomtext {
margin: 0;
padding: 0;
padding-left: 5px;
height: 15px;
background: red;
font-size: 14px;
font-weight: bold;
color: #878a8c;
}
.bottomtext img {
margin-bottom: -2px;
padding-right: 5px;
}
.toptext b {
color: black;
}
.left-side .upvote {
padding-bottom: 5px;
}
.left-side .downvote {
padding-top: 7px;
}
.username {
color: blue;
}
.main-content-small {
margin: 0;
padding: 0;
flex-grow: 1;
display: none;
}
.contain-small img {
width: 50%;
display: none;
}
.bottomtext-small {
margin: 0;
padding: 0;
padding-left: 5px;
height: 15px;
background: red;
font-size: 14px;
font-weight: bold;
color: #878a8c;
display: none;
}
.left-side .upvote-small {
padding-bottom: 5px;
display: none;
}
.left-side .downvote-small {
padding-top: 7px;
display: none;
}
.button {
position: absolute;
top: 8px;
right: 10px;
background-color: white;
border: 1px solid black;
height: 14px;
width: 20px;
}
.button:hover {
background-color: grey;
}
.button-small {
position: absolute;
top: 5px;
right: 10px;
background-color: white;
border: 1px solid black;
height: 20px;
width: 7px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post-container">
<div class="left-side">
<div> <img class="upvote" src="https://i.imgur.com/AdwzPRs.png" height="15"> </div>
<div> <img class="downvote" src="https://i.imgur.com/XoJ1Jjy.png" height="15"> </div>
</div>
<div class="post">
<p class="toptext">
<input type="button" class="button"></input>
<span class="username">webdev18</span> 33 points 18 minutes ago
</p>
<div class="main-content">
<p class="contain-com">
When I want to collapse this comment by clicking the button in the corner...
</p>
<p class="bottomtext">
<img src="https://i.imgur.com/1IIJe1r.png" height="15">Respond
</p>
</div>
</div>
</div>
<div class="post-container">
<div class="left-side">
<div> <img class="upvote" src="https://i.imgur.com/AdwzPRs.png" height="15"> </div>
<div> <img class="downvote" src="https://i.imgur.com/XoJ1Jjy.png" height="15"> </div>
</div>
<div class="post">
<p class="toptext">
<input type="button" class="button"></input>
<span class="username">webdev18</span> 33 points 18 minutes ago
</p>
<div class="main-content">
<p class="contain-com">
...both comments collapse.
</p>
<p class="bottomtext">
<img src="https://i.imgur.com/1IIJe1r.png" height="15">Respond
</p>
</div>
</div>
</div>