With two columns (left indicates name; right provide collapse function(a button)), how would you create collapsible content on the next row with full width (covers both columns)?
I am only able to collapse within a certain column. I tried to collapse a row below by creating a new div, but then the collapsing action no longer seems to work.
It should look like this:
Thank you for your help!
JavaScript is from: https://www.w3schools.com/howto/howto_js_collapsible.asp
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
:root {
--colorbggray: rgb(65,65,65);
--colorlightgray: rgb(150,150,150);
--colorcyan: rgb(0, 229, 255);
--colorgreen: rgb(0, 255, 0);
--colorUpGrey: rgb(135,135,135);
--colorLowGrey: rgb(38,38,38);
--colorMidGrey: rgb(95,95,95);
--colorGreen: rgb(11,69,2);
--colorAmber: orange;
--colorRed: red;
}
.verticalmenu-auto {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}
.verticalmenu-auto > div {
border-top: 2px solid var(--colorUpGrey);
border-bottom: 2px solid var(--colorLowGrey);
border-left: 2px solid var(--colorUpGrey);
border-right: 2px solid var(--colorLowGrey);
background: var(--colorMidGrey); color: white;
width: 100px;
padding-top: 8px;
padding-bottom: 8px;
padding-right: 16px;
padding-left: 16px;
margin: 0.5px;
text-align: left;
font-size: 16px;
}
.verticalmenu-auto li, {
border-top: 2px solidauto var(--colorUpGrey);
border-bottom: 2px solid var(--colorLowGrey);
border-left: 2px solid var(--colorUpGrey);
border-right: 2px solid var(--colorLowGrey);
background: var(--colorMidGrey);
}
.collapsible {
background: var(--colorMidGrey); color: white;
cursor: pointer;
width: 100%;
border: none;
text-align: center;
outline: none;
}
.collapsible:after {
content: '\1433';
float: center;
transform: scale(.7, 1);
}
.active:after {
content: "\142F";
transform: scale(1, .7);
}
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.0s ease-out;
grid-column-start: -1;
grid-column-end: 1;
background-color: gray;
}
<body>
<p>On right side open content which is has the width of both columns combined</p>
<ul style="list-style:none;padding-left:0;">
<li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
<div class='content'>
<p> content</p>
</div>
</div>
</div>
</li>
<li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
<div class='content'>
<p> content</p>
</div>
</div>
</div>
</li>
A slight change in your JS toggle and also putting content outside the parent div so that it act as block
$(document).ready(function () {
$('.collapsible').on('click', function(event){
event.preventDefault();
// create accordion variables
var accordion = $(this);
var accordionContent = accordion.closest('.verticalmenu-auto').next('.content');
// toggle accordion link open class
accordion.toggleClass("active");
// toggle accordion content
accordionContent.slideToggle(250);
accordionContent.toggleClass("active");
});
});
:root {
--colorbggray: rgb(65,65,65);
--colorlightgray: rgb(150,150,150);
--colorcyan: rgb(0, 229, 255);
--colorgreen: rgb(0, 255, 0);
--colorUpGrey: rgb(135,135,135);
--colorLowGrey: rgb(38,38,38);
--colorMidGrey: rgb(95,95,95);
--colorGreen: rgb(11,69,2);
--colorAmber: orange;
--colorRed: red;
}
.verticalmenu-auto {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}
.verticalmenu-auto > div {
border-top: 2px solid var(--colorUpGrey);
border-bottom: 2px solid var(--colorLowGrey);
border-left: 2px solid var(--colorUpGrey);
border-right: 2px solid var(--colorLowGrey);
background: var(--colorMidGrey); color: white;
width: 100px;
padding-top: 8px;
padding-bottom: 8px;
padding-right: 16px;
padding-left: 16px;
margin: 0.5px;
text-align: left;
font-size: 16px;
}
.verticalmenu-auto li, {
border-top: 2px solidauto var(--colorUpGrey);
border-bottom: 2px solid var(--colorLowGrey);
border-left: 2px solid var(--colorUpGrey);
border-right: 2px solid var(--colorLowGrey);
background: var(--colorMidGrey);
}
.collapsible {
background: var(--colorMidGrey); color: white;
cursor: pointer;
width: 100%;
border: none;
text-align: center;
outline: none;
}
.collapsible:after {
content: '\1433';
float: center;
transform: scale(.7, 1);
}
.collapsible.active:after {
content: "\142F";
transform: scale(1, .7);
}
.content {
display: none;
overflow: hidden;
transition: max-height 0.0s ease-out;
grid-column-start: -1;
grid-column-end: 1;
background-color: #BFBFBF;
padding: 10px;
color: #fff;
}
.content.active {
height: auto;
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p>On right side open content which is has the width of both columns combined</p>
<ul style="list-style:none;padding-left:0;">
<li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
</div>
</div>
<div class='content'>
<p> content</p>
</div>
</li>
<li>
<div class="verticalmenu-auto">
<div style="flex-grow: 10">Name</div>
<div style="flex-grow: 1; text-align: center">
<button class="collapsible"></button>
</div>
</div>
<div class='content'>
<p> content</p>
</div>
</li>
Are you need like this?
var buttons = document.querySelectorAll('.toggle');
buttons.forEach(function(el) {
el.addEventListener('click', function(event) {
var target = event.target.getAttribute('target');
document.getElementById(target).classList.toggle('expanded');
});
});
table {
width: 100%;
}
table td:nth-child(2) {
width: 100px;
}
.row-detail {
display: none;
}
.expanded {
display: block;
}
<table>
<tr>
<td>Row 1</td>
<td><button class="toggle" target="row-detail-1">Toggle 1</button></td>
</tr>
<tr id="row-detail-1" class="row-detail">
<td colspan="2">This detail from row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td><button class="toggle" target="row-detail-2">Toggle 2</button></td>
</tr>
<tr id="row-detail-2" class="row-detail">
<td colspan="2">This detail from row 2</td>
</tr>
<tr>
<td>Row 3</td>
<td><button class="toggle" target="row-detail-3">Toggle 3</button></td>
</tr>
<tr id="row-detail-3" class="row-detail">
<td colspan="2">This detail from row 3</td>
</tr>
</table>
Related
What I want to do here is whenever the user selects their choice of a specific component a corresponding popup is displayed according to the selected buttons/choices.
But, so far I couldn't bind the specific buttons as well as the I keep getting the two popups whenever I press the recommended button
basically, I'm trying to do something like this
Here's my code:
//choices buttons
const mainbtnEL_1 = document.querySelectorAll(".btn__001");
mainbtnEL_1.forEach(btnEl => {
btnEl.addEventListener("click", () => {
document.querySelector('.special__1')?.classList.remove('special__1');
btnEl.classList.add('special__1');
});
});
const mainbtnEL_2 = document.querySelectorAll(".btn__002");
mainbtnEL_2.forEach(btnEl => {
btnEl.addEventListener("click", () => {
document.querySelector('.special__2')?.classList.remove('special__2');
btnEl.classList.add('special__2');
});
});
//pop up
function open__Popup() {
popup.classList.add('open-Popup');
}
function close__Popup() {
popup.classList.remove('open-Popup');
}
let popup__2 = document.getElementById("popup__2");
function open__Popup2() {
popup__2.classList.add('open-Popup');
}
function close__Popup2() {
popup__2.classList.remove('open-Popup');
}
.special__1 {
background-color: #4837ff;
}
.special__2 {
background-color: #4837ff;
}
.popup {
display: grid;
grid-template-columns: 1fr 1fr;
width: 800px;
max-width: 800px;
background: #FFF;
border-radius: 6px;
position: relative;
bottom: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.1);
text-align: center;
justify-content: center;
padding: 0 30px 30px;
color: #333;
align-items: center;
justify-self: center;
margin: 0 auto;
height: 50vh;
z-index: 1;
visibility: hidden;
transition: transform 0.4s ease;
}
.open-Popup {
visibility: visible;
transform: translate(-50%, -50%) scale(1);
}
.table__1 {
font-family: arial, sans-serif;
width: 100%;
height: 50%;
background: #fff;
border-collapse: collapse;
}
td,
th {
border: 1px solid #acacac;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.main__img_1 {
width: 400px;
margin-top: 20px;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(8, 218, 255, 0.6);
}
.close__btn {
position: relative;
width: 50%;
margin-top: 20px;
left: 80px;
background: hsla(204, 100%, 15%, 0.286);
color: #fff;
border: 0;
outline: none;
font-size: 18px;
border-radius: 4px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
<h2> Choose your CPU </h2>
<div class="mainbtn__1">
<button type="button" class="btn__001" id="AMD">AMD</button>
<button type="button" class="btn__001" id="Intel">Intel</button>
</div>
<h2> Choose your GPU </h2>
<div class="mainbtn__2">
<button type="button" class="btn__002" id="RTX3060">RTX3060</button>
<button type="button" class="btn__002" id="RTX3050">RTX3050</button>
</div>
<div class="popup__container">
<button type="submit" class="popup__btn" id="recommended" onclick="open__Popup(); open__Popup2()">Recommended</button>
<!-- FIRST popup page -->
<div class="popup" id="popup">
<table class="table__1" id="tb_1">
<tr>
<td>CPU</td>
<td>AMD</td>
</tr>
<tr>
<td>GPU</td>
<td>RTX3060</td>
</tr>
</table>"
<button type="button" class="close__btn" onclick="close__Popup()">Close</button>
</div>
<!-- second popup page -->
<div class="popup" id="popup__2">
<table class="table__1" id="tb_2">
<tr>
<td>CPU</td>
<td>Intel</td>
</tr>
<tr>
<td>GPU</td>
<td>RTX3050</td>
</tr>
</table>"
<button type="button" class="close__btn" onclick="close__Popup2()">Close</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="app.js"></script>
And the answer to this is always: Delegate
the button names and classes made is non-trivial to add and remove the special__ classes
const choices = document.getElementById("choices");
const buttons = choices.querySelectorAll("button");
const popupContainer = document.querySelector(".popup__container");
const recommend = document.getElementById("recommended");
//choices buttons
choices.addEventListener("click", (e) => {
const tgt = e.target;
if (!tgt.matches("button")) return;
const whichButton = tgt.dataset.target.replace("popup","")
tgt.classList.add(`special__${whichButton}`);
// document.getElementById(tgt.dataset.target).classList.add('open-Popup');
});
// close
popupContainer.addEventListener("click", (e) => {
const tgt = e.target;
if (!tgt.matches(".close__btn")) return;
const parentPopup = tgt.closest("div.popup");
const id = parentPopup.id;
parentPopup.classList.remove('open-Popup');
const sourceButton = `[data-target=${id}]`;
const className = `special__${id.replace("popup","")}`;
document.querySelectorAll(sourceButton).forEach(button => button.classList.remove(className))
});
recommend.addEventListener("click", () => {
// document.querySelectorAll(".popup").forEach(popup => popup.classList.add("open-Popup"));
choices.querySelectorAll("button")
.forEach(button => [...button.classList.entries()] // the buttons classes
.forEach(([_,cls]) => {
if (cls.startsWith("special__")) { // it was selected
document.getElementById(button.dataset.target).classList.add('open-Popup');
}
})
);
});
.special__1 {
background-color: #4837ff;
}
.special__2 {
background-color: #4837ff;
}
.popup {
display: grid;
grid-template-columns: 1fr 1fr;
width: 800px;
max-width: 800px;
background: #FFF;
border-radius: 6px;
position: relative;
bottom: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.1);
text-align: center;
justify-content: center;
padding: 0 30px 30px;
color: #333;
align-items: center;
justify-self: center;
margin: 0 auto;
height: 50vh;
z-index: 1;
visibility: hidden;
transition: transform 0.4s ease;
}
.open-Popup {
visibility: visible;
transform: translate(-50%, -50%) scale(1);
}
.table__1 {
font-family: arial, sans-serif;
width: 100%;
height: 50%;
background: #fff;
border-collapse: collapse;
}
td,
th {
border: 1px solid #acacac;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.main__img_1 {
width: 400px;
margin-top: 20px;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(8, 218, 255, 0.6);
}
.close__btn {
position: relative;
width: 50%;
margin-top: 20px;
left: 80px;
background: hsla(204, 100%, 15%, 0.286);
color: #fff;
border: 0;
outline: none;
font-size: 18px;
border-radius: 4px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
<div id="choices">
<h2> Choose your CPU </h2>
<div class="mainbtn__1">
<button type="button" class="btn__001" id="AMD" data-target="popup1">AMD</button>
<button type="button" class="btn__001" id="Intel" data-target="popup2">Intel</button>
</div>
<h2> Choose your GPU </h2>
<div class="mainbtn__2">
<button type="button" class="btn__002" id="RTX3060" data-target="popup1">RTX3060</button>
<button type="button" class="btn__002" id="RTX3050" data-target="popup2">RTX3050</button>
</div>
</div>
<div class="popup__container">
<button type="submit" class="popup__btn" id="recommended">Recommended</button>
<!-- FIRST popup page -->
<div class="popup" id="popup1">
<table class="table__1" id="tb_1">
<tr>
<td>CPU</td>
<td>AMD</td>
</tr>
<tr>
<td>GPU</td>
<td>RTX3060</td>
</tr>
</table>
<button type="button" class="close__btn">Close</button>
</div>
<!-- second popup page -->
<div class="popup" id="popup2">
<table class="table__1" id="tb_2">
<tr>
<td>CPU</td>
<td>Intel</td>
</tr>
<tr>
<td>GPU</td>
<td>RTX3050</td>
</tr>
</table>
<button type="button" class="close__btn">Close</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="app.js"></script>
I have created a page to see the events in a sort of calendar. I wish I could add new events when I hover in empty sections by showing a "+". The code is as follows:
$("#classroom_admin-orario-content").hover(function() {
console.log("Mouse leave");
$(this).find(".row").each(function() {
$(this).find(".col").each(function() {
$(this).hover(function() {
var row = $(this).parent().index();
var column = $(this).index();
console.log("Row: " + row + " Col: " + column);
});
});
});
});
.container-orario {
display: grid;
grid-template-rows: 3em 3em auto;
}
.title {
background: #217346;
text-align: center;
display: grid;
place-content: center;
color: #fff;
position: sticky;
top: 0;
z-index: 10;
}
.days {
background: #f3f2f1;
display: grid;
place-content: center;
text-align: center;
grid-template-columns: 3em 20px repeat(6, 1fr);
top: 3em;
z-index: 10;
border-bottom: 2px solid #dadce0;
}
.day {
border-left: 1px solid #dadce0;
}
.content {
display: grid;
grid-template-columns: 3em 20px repeat(6, 1fr);
grid-template-rows: repeat(8, 6em);
row-gap: 3px;
margin-top: 10px;
}
.time {
grid-column: 1;
text-align: right;
align-self: end;
font-size: 80%;
position: relative;
bottom: -1ex;
color: #70757a;
padding-right: 2px;
}
.col {
border-right: 1px solid #dadce0;
grid-row: 1/span 24;
grid-column: span 1;
}
.filler-col {
grid-row: 1/-1;
grid-column: 2;
border-right: 1px solid #dadce0;
}
.row {
grid-column: 2/-1;
border-bottom: 1px solid #dadce0;
}
.event {
border-radius: 5px;
padding: 5px;
margin-right: 10px;
font-weight: bold;
font-size: 80%;
}
.weekend {
background-color: #f1f3f4;
}
.calendar1 {
background-color: rgba(253, 197, 208, 0.7);
color: #f8254e;
border: solid;
border-top: none;
border-bottom: none;
border-right: none;
border-width: 2px;
}
.calendar2 {
background-color: rgba(254, 240, 219, 0.7);
color: #fc9b10;
border: solid;
border-top: none;
border-bottom: none;
border-right: none;
border-width: 2px;
}
.calendar3 {
background-color: rgba(247, 219, 254, 0.7);
color: #e010fc;
border: solid;
border-top: none;
border-bottom: none;
border-right: none;
border-width: 2px;
}
.calendar4 {
background-color: rgba(219, 227, 254, 0.7);
color: #105bfc;
border: solid;
border-top: none;
border-bottom: none;
border-right: none;
border-width: 2px;
}
.calendar5 {
background-color: rgba(183, 236, 253, 0.7);
color: #2fc6d1;
border: solid;
border-top: none;
border-bottom: none;
border-right: none;
border-width: 2px;
}
/* .current-time {
grid-row: 10;
border-top: 2px solid #ea4335;
position: relative;
top: calc(50% - 1px);
}
.circle {
width: 12px;
height: 12px;
border: 1px solid #ea4335;
border-radius: 50%;
background: #ea4335;
position: relative;
top: -6px;
left: -6px;
} */
.current {
font-weight: bold;
}
.time-subtitle {
margin-top: 10px;
font-weight: 400;
font-family: sans-serif;
}
<div class="container-orario h-full relative antialiased w-full">
<div class="days" id="classroom_admin-orario-days">
<div class="filler"></div>
<div class="filler"></div>
<div class="day">Lun</div>
<div class="day">Mar</div>
<div class="day">Mer</div>
<div class="day">Gio</div>
<div class="day">Ven</div>
<div class="day">Sab</div>
</div>
<div class="content" id="classroom_admin-orario-content">
<div class="time" style="grid-row:1">08:00</div>
<div class="time" style="grid-row:2">09:00</div>
<div class="time" style="grid-row:3">10:00</div>
<div class="time" style="grid-row:4">11:00</div>
<div class="time" style="grid-row:5">12:00</div>
<div class="time" style="grid-row:6">13:00</div>
<div class="time" style="grid-row:7">14:00</div>
<div class="filler-col"></div>
<div class="col" style="grid-column:3"></div>
<div class="col" style="grid-column:4"></div>
<div class="col" style="grid-column:5"></div>
<div class="col" style="grid-column:6"></div>
<div class="col" style="grid-column:7"></div>
<div class="col" style="grid-column:8"></div>
<div class="row" style="grid-row:1"></div>
<div class="row" style="grid-row:2"></div>
<div class="row" style="grid-row:3"></div>
<div class="row" style="grid-row:4"></div>
<div class="row" style="grid-row:5"></div>
<div class="row" style="grid-row:6"></div>
<div class="row" style="grid-row:7"></div>
<!-- EVENT LIST -->
<div class="event calendar1" style="grid-column: 3;grid-row: 2/span 2; ">Matematica<br><span class="time-subtitle">08:00 - 10:00</span></div>
<div class="event calendar2" style="grid-column: 3;grid-row: 4/span 1;">Sistemi e Reti<br><span class="time-subtitle">10:00 - 11:00</span></div>
<div class="event calendar3" style="grid-column: 3;grid-row: 5/span 1;">Educazione Fisica<br><span class="time-subtitle">11:00 - 12:00</span></div>
<div class="event calendar4" style="grid-column: 3;grid-row: 6/span 1;">Inglese<br><span class="time-subtitle">12:00 - 13:00</span></div>
<div class="event calendar5" style="grid-column: 3;grid-row: 7/span 1;">Italiano<br><span class="time-subtitle">13:00 - 14:00</span></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
With JavaScript I can't even get printed in which row and column the cell under the cursor is. Thanks in advance
Result (with the events entered)
So I think this works. I've added an event listener to the container and added a data-row attribute to each row, and a data-column attribute to each column. At each mousemove it tests each row and column bounding rectangle to see if the mouse coordinates are within that element. If yes, it pulls the relevant data attribute in to the variables 'row' and 'col'.
HTML here:
<div class="content" id="classroom_admin-orario-content">
<div class="time" style="grid-row:1">08:00</div>
<div class="time" style="grid-row:2">09:00</div>
<div class="time" style="grid-row:3">10:00</div>
<div class="time" style="grid-row:4">11:00</div>
<div class="time" style="grid-row:5">12:00</div>
<div class="time" style="grid-row:6">13:00</div>
<div class="time" style="grid-row:7">14:00</div>
<div class="filler-col"></div>
<div class="col" data-col="1" style="grid-column:3"></div>
<div class="col" data-col="2" style="grid-column:4"></div>
<div class="col" data-col="3" style="grid-column:5"></div>
<div class="col" data-col="4" style="grid-column:6"></div>
<div class="col" data-col="5" style="grid-column:7"></div>
<div class="col" data-col="6" style="grid-column:8"></div>
<div class="row" data-row="1" style="grid-row:1"></div>
<div class="row" data-row="2" style="grid-row:2"></div>
<div class="row" data-row="3" style="grid-row:3"></div>
<div class="row" data-row="4" style="grid-row:4"></div>
<div class="row" data-row="5" style="grid-row:5"></div>
<div class="row" data-row="6" style="grid-row:6"></div>
<div class="row" data-row="7" style="grid-row:7"></div>
<!-- EVENT LIST -->
</div>
JS here:
var row;
var col;
$( document ).ready(function() {
$("#classroom_admin-orario-content").mousemove(function(event) {
row=-1;
col=-1;
const x=event.pageX-window.scrollX;
const y=event.pageY-window.scrollY;
$('.row').each(function() {
const rect=$(this)[0].getBoundingClientRect();
if(x>=rect.left && x<rect.right && y>=rect.top && y<=rect.bottom) {
row=$(this).attr('data-row');
}
});
$('.col').each(function() {
const rect=$(this)[0].getBoundingClientRect();
if(x>=rect.left && x<rect.right && y>=rect.top && y<=rect.bottom) {
col=$(this).attr('data-col');
}
});
console.log("col="+col+" row="+row);
});
});
It'll hopefully get you started.
Probably the easiest thing to do is to use a custom attribute (e.g. the data- attribute) on each element to identify the row and column (or other unique identifier) so when you hover you can use jQuery's .attr method to get the details you need.
For custom attributes see here.
jQuery .attr method is here.
I have a table that is populated from a database with a dropdown menu that is populated along side the table which is generated from code in the php. Im tying to use javascript and css to make each drop down open on click but I cannot seem to get it to work. I've included the code below. I initilly had the script working but it only worked on the first instance of the dropdown. I reviewed a similar post to what Im looking to do but it was to no avail.
CSS
background-color: #04AA6D;
color: white;
padding: 5px;
font-size: 12px;
border: none;
text-transform: uppercase;
}
.yardDropbtn i{
font-size: 12px;
top: 1px;
position: relative;
}
.yardDropdown{
position: relative;
display: inline-block;
}
.yard-dropdown-content{
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
right: 0;
}
.yard-dropdown-content a{
color: black;
padding: 5px 16px;
text-decoration: none;
display: block;
}
.yard-dropdown-content a:hover {
background-color: #ddd;
}
.yardDropBtnCt {
display: none;
background-color: #f1f1f1;
color: black;
/*margin-left: 5px;*/
border: 1px;
display: block;
width: 100%;
height: 30px;
font-size: 15px;
text-transform: uppercase;
font-size: 12px;
}
.yardDropBtnCt:hover {
background-color: #ddd;
}
.trackBtn{
display: none;
background-color: #f1f1f1;
color: black;
margin-left: 5px;
border: 1px;
display: block;
width: 100%;
height: 30px;
font-size: 15px;
}
.trackBtn:hover{
background-color: #ddd;
}
/*.yard-dropdown-content:hover{
background-color: #ddd;
}*/
.show_yard_Dropdown .yard-dropdown-content {
display: block;
}
.show_yard_Dropdown .yardDropbtn {
background-color: #3e8e41;
}
JavaScript
var dropDownDivY = document.querySelector(".yardDropdown");
/*dropDownButton.addEventListener("click", function(){
dropDownDivY.classList.toggle('show_yard_Dropdown');
});*/
dropDownButton.forEach(btn => {
btn.onclick = function() {
dropDownDivY.style.display = "block";
}
});
HTML
<tr>
<td width='50px' class='yard8'>6400'</td>
<td width='100px' class='yard8 track'>Receiving 1</td>
<td width='150px' class='yard8'></td>
<td width='150px' class='yard8'>
<td width='250px' class='yard8 destination'></td>
<td width='100px'class='yard8 length'>3455'</td>
<td width='100px' class='yard8 weight'></td>
<td width='150px' class='yard8 status'></td>
<td class='yard8'>
<div class='progressContainer'>
<div class='progress' style='width:54%'>54%</div>
</div>
</td>
<td class='yard8 remarks'></td>
<td width='59px'>
<div class="yardDropdown">
<button class="yardDropbtn">Menu<i class="bx bx-menu"></i></button>
<div class="yard-dropdown-content">Edit TrackAEI Populate</div>
</div>
</td>
</tr>
<form action="" method="POST"></form>
document.querySelector(".yardDropdown");
The querySelector method only returns the first element matching the selector, so it can never work for more than the first row.
You need to use querySelectorAll instead and then loop over all the elements found:
let dropDowns = document.querySelectorAll(".yardDropdown");
for (let i = 0; i < dropDowns.length; i++) {
let dropDown = dropDowns[i]
dropDown.addEventListener('click', function () {
// do something, you can use the `i` variable to know which row has been clicked if you need to
})
}
I've been having a problem with a dropdown menu option. The thing refuses to display when I hover "Store". I've already tried in different ways (in some I was almost lucky, in others not so much) but in the end nothing really worked for me.
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("tituloh").style.fontSize = "15px";
document.getElementById("tituloh").style.marginBottom = "70px";
document.getElementById("tituloh").style.top = "20px";
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "47px";
} else {
document.getElementById("tituloh").style.fontSize = "30px";
document.getElementById("tituloh").style.top = "35px";
document.getElementById("tituloh").style.marginBottom = "100px"
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "50px";
}
}
#body {
margin: 0px;
}
#remove {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
}
.order {
display: inline-block;
}
#remove .opt {
display: inline-block;
color: white;
text-align: center;
font-size: 24px;
padding: 14px 16px;
background-color: black;
text-decoration: none;
}
#remove .opt:hover,
.dropmenu:hover .dropbutton {
background-color: white;
color: black;
}
.dropmenu {
float: right;
}
.dropmenu .dropbutton {
font-size: 24px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropcont {
position: absolute;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
display: none;
}
.dropcont .dropitem {
text-decoration: none;
width: 150px;
height: 30px;
margin: 5px 0;
padding-top: 5px;
padding-left: 5px;
display: inline-block;
text-align: left;
}
.dropcont a {
text-decoration: none;
color: black;
font-size: 24px;
}
.dropcont a:hover {
text-decoration: underline;
transition: 0.5s;
}
.dropmenu:hover .dropcont {
display: block;
}
#header {
left: 0;
top: 0;
text-align: center;
padding: 20px 5px;
padding-bottom: 0px;
position: fixed;
width: 100%;
margin: 0px;
padding-left: 0px;
transition: 0.2s;
background-color: black;
background-image: url(header/AvettBrothers-loja.jpg);
background-repeat: no-repeat;
background-position: 0 10%;
background-size: cover;
z-index: 1;
}
#tituloh {
position: relative;
top: 35px;
text-shadow: -5px 5px 10px #000000;
font-size: 30px;
color: white;
transition: 0.3s;
margin-bottom: 100px;
}
.sales {
margin-top: 300px;
}
.thumbnails {
width: 50%;
margin: 0 auto;
text-align: center;
}
#tshirts,
#casacos,
#posters,
#acessorios,
#projects,
#kids {
position: relative;
display: inline;
border: solid red;
padding: 20px 0;
margin-bottom: 100px;
}
img.contrast {
margin: 20px 10px;
filter: contrast(70%) opacity(90%);
border: solid blue;
}
.textimgcentro {
position: absolute;
left: 0;
top: -150%;
width: 100%;
font-size: 30px;
text-align: center;
color: white;
text-shadow: -10px 5px 10px #000000;
border: solid black;
}
#top {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" ; http-equiv="refresh" content="5">
<title>Loja</title>
<link rel="stylesheet" type="text/css" href="loja/loja.css">
<script type="text/javascript" src="loja/loja.js"></script>
</head>
<body>
<div id="header">
<div id="tituloh">
<h1>Store</h1>
</div>
<ul id="remove">
<li class="order">Home</li>
<li class="order">About</li>
<li class="order">Albuns</li>
<li class="order">Tours</li>
<li class="dropmenu, order">
<a href="#link" class="dropbutton, opt">
Store
</a>
<div class="dropcont">
T-Shirts<br>
Jackets<br>
Posters<br>
Accessories<br>
Side Projects<br>
Kids<br>
</div>
</li>
<li class="order">Forum</li>
</ul>
</div>
<br/>
<br/>
<br/>
<div class="sales">Sales</div>
<div class="thumbnails">
<div id="tshirts">
<img src="loja/thumbnails/tshirts.jpg" class="contrast">
<div class="textimgcentro">
T-Shirts
</div>
</div>
<div id="casacos">
<img src="loja/thumbnails/casacos.jpg" class="contrast">
<div class="textimgcentro">
Jackets
</div>
</div>
<div id="posters">
<img src="loja/thumbnails/posters.jpg" class="contrast">
<div class="textimgcentro">
Posters
</div>
</div>
<div id="acessorios">
<img src="loja/thumbnails/acessorio.jpg" class="contrast">
<div class="textimgcentro">
Accessories
</div>
</div>
<div id="projects">
<img src="loja/thumbnails/project.jpg" class="contrast">
<div class="textimgcentro">
Side Projects
</div>
</div>
<div id="kids">
<img src="loja/thumbnails/kids.jpg" class="contrast">
<div class="textimgcentro">
Kids
</div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<div class="bestsell">
<div id="top">
<h1>Top Products</h1>
</div>
</div>
<hr id="cont"> Contactos Oficiais: <br /><br />
<img src="loja/Contactos/facebook.png" ; height="50" ; width="50" ; title="Facebook" ; alt="Link para Facebook">
<img src="loja/Contactos/insta.png" ; height="50" ; width="50" ; title="Instagram" ; alt="Link para Instagram">
<img src="loja/Contactos/twitter.png" ; height="50" ; width="50" ; title="Twitter" ; alt="Link para Twitter">
</body>
</html>
How can I fix this?
Also, how do I make it so that, while hovering the dropdown menu, "Store" remains with a white background and black text?
Thank you!
I'm using Angular version 6 and want either an Angular solution or pure html/javascript solution for having a table with expanded rows.
So when you click a row it expands.
Note: I don't want to use angular material, jQuery or any third party.
This is my html table:
<table class="ex-table p3">
<thead class="ex-table__head">
<tr class="ex-table__row">
<th class="ex-table__cell">id</th>
<th class="ex-table__cell">First Name</th>
</tr>
</thead>
<tbody>
<tr class="ex-table__row" *ngFor="let item of data">
<td class="ex-table__cell">
{{item.od}}
</td>
<td class="ex-table__cell">
{{item.firstName}}
</td>
</tr>
</tbody>
</table>
I've attempted rowspan and colspan and nested tables but could'nt get that working.
Do you want something like below? . the rows can be expanded. even the whole table can be expanded at once.
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script type="text/javascript">
function toggle(btnID, eIDs) {
// Feed the list of ids as a selector
var theRows = document.querySelectorAll(eIDs);
// Get the button that triggered this
var theButton = document.getElementById(btnID);
// If the button is not expanded...
console.log(theButton.getAttribute("aria-expanded"))
if (theButton.getAttribute("aria-expanded") == "false") {
// Loop through the rows and show them
for (var i = 0; i < theRows.length; i++) {
theRows[i].classList.add("shown");
theRows[i].classList.remove("hidden");
}
// Now set the button to expanded
theButton.setAttribute("aria-expanded", "true");
// Otherwise button is not expanded...
} else {
// Loop through the rows and hide them
for (var i = 0; i < theRows.length; i++) {
theRows[i].classList.add("hidden");
theRows[i].classList.remove("shown");
}
// Now set the button to collapsed
theButton.setAttribute("aria-expanded", "false");
}
}
function toggle1(btnID, eIDs) {
// Feed the list of ids as a selector
var theRows = document.querySelectorAll(eIDs);
// Get the button that triggered this
var theButton = document.getElementById(btnID);
// If the button is not expanded...
if (theButton.getAttribute("aria-expanded") == "false") {
// Loop through the rows and show them
for (var i = 0; i < theRows.length; i++) {
theRows[i].classList.add("shown");
theRows[i].classList.remove("hidden");
}
// Now set the button to expanded
theButton.setAttribute("aria-expanded", "true");
document.getElementById("btnMSb1").setAttribute("aria-expanded", "true");
document.getElementById("btnMSb2").setAttribute("aria-expanded", "true");
document.getElementById("btnMSb3").setAttribute("aria-expanded", "true");
// Otherwise button is not expanded...
} else {
// Loop through the rows and hide them
for (var i = 0; i < theRows.length; i++) {
theRows[i].classList.add("hidden");
theRows[i].classList.remove("shown");
}
// Now set the button to collapsed
theButton.setAttribute("aria-expanded", "false");
document.getElementById("btnMSb1").setAttribute("aria-expanded", "false");
document.getElementById("btnMSb2").setAttribute("aria-expanded", "false");
document.getElementById("btnMSb3").setAttribute("aria-expanded", "false");
}
}
</script>
</head>
<style>
body {
font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1.4;
background: #fefefe;
color: #333;
margin: 0 1em;
}
table {
width: 100%;
margin: 1em 0;
border-collapse: collapse;
}
caption {
text-align: left;
font-style: italic;
padding: 0.25em 0.5em 0.5em 0.5em;
}
th,
td {
padding: 0.25em 0.5em 0.25em 1em;
vertical-align: text-top;
text-align: left;
text-indent: -0.5em;
}
th {
vertical-align: bottom;
background-color: rgba(0, 0, 0, 0.75);
color: #fff;
font-weight: bold;
}
.process {
margin-top: 35px;
display: inline-block;
width: 10%;
padding: 5px;
border-top: 3px solid black;
border-bottom: 3px solid black;
color: #fff;
font-style: normal;
font-weight: bold;
}
.row td:nth-of-type(2),
.cell td:nth-of-type(3) {
font-style: italic;
}
.row th:nth-of-type(3),
.row td:nth-of-type(3),
.cell th:nth-of-type(4),
.cell td:nth-of-type(4) {
text-align: right;
}
td[colspan] {
background-color: #f5f5f5;
color: #000;
font-weight: normal;
font-style: italic;
padding: 0;
text-indent: 0;
}
tr.shown,
tr.hidden {
display: table-row;
}
tr.hidden {
display: none;
}
.row button {
background-color: transparent;
border: .1em solid transparent;
font: inherit;
padding: 0.25em 0.5em 0.25em .25em;
width: 100%;
text-align: left;
}
.row button:focus,
.row button:hover {
background-color: #ddd;
outline: .2em solid #00f;
}
.row button svg {
width: .8em;
height: .8em;
margin: 0 0 -.05em 0;
fill: #66f;
transition: transform 0.25s ease-in;
transform-origin: center 45%;
}
.row button:hover svg,
.row button:focus svg {
fill: #00c;
}
/* Lean on programmatic state for styling */
.row button[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.cell button {
font-size: 60%;
color: #000;
background-color: #00f;
padding: 0.3em 0.2em 0 0.2em;
border: 0.2em solid #00f;
border-radius: 50%;
line-height: 1;
text-align: center;
text-indent: 0;
transform: rotate(270deg);
}
.cell button svg {
width: 1.25em;
height: 1.25em;
fill: #fff;
transition: transform 0.25s ease-in;
transform-origin: center 45%;
}
.cell button:hover,
.cell button:focus {
background-color: #fff;
outline: none;
}
.cell button:hover svg,
.cell button:focus svg {
fill: #00f;
}
/* Lean on programmatic state for styling */
.cell button[aria-expanded="true"] svg {
transform: rotate(90deg);
}
/* Proven method to visually hide something but */
/* still make it available to assistive technology */
.visually-hidden {
position: absolute;
top: auto;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
/* IE 6/7 */
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
white-space: nowrap;
}
</style>
<table class="cell">
<caption>Dashboard</caption>
<thead>
<tr>
<th><button type="button" id="btnMSb" aria-expanded="false" onclick="toggle1(this.id,'#MS01b,#MS02b,#MS03b');" aria-controls="MS01b MS02b MS03b" aria-label="3 more from" aria-labelledby="btnMSb lblMSb">
<svg xmlns="\http://www.w3.org/2000/svg"" viewBox="0 0 80 80" focusable="false"><path d="M70.3 13.8L40 66.3 9.7 13.8z"></path></svg>
</button></th>
<th>Batch</th>
<th>Status</th>
<th>Start</th>
<th>End</th>
<th>agreed</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button type="button" id="btnMSb1" aria-expanded="false" onclick="toggle(this.id,'#MS01b');" aria-controls="MS01b" aria-label="3 more from" aria-labelledby="btnMSb1 lblMSb1">
<svg xmlns="\http://www.w3.org/2000/svg"" viewBox="0 0 80 80" focusable="false"><path d="M70.3 13.8L40 66.3 9.7 13.8z"></path></svg>
</button>
</td>
<td>Batch1</td>
<td>Green</td>
<td>10AM</td>
<td>11AM</td>
<td>11:30AM</td>
</tr>
<tr id="MS01b" class="hidden">
<td></td>
<td colspan="5">
<div style="vertical-align: middle; text-align: center;height: 100px;">
<div class='process' style="border-right-style: none;border-left: 3px solid black; background-color: #16a085">Step1</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #F1A9A9">Step2</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #E4FFAE">Step3</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #BFC6B9">Step4</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #87FEF8">Step5</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right: 3px solid black;border-left-style: none; background-color: #FF9A9E">Step6</div>
</div>
</td>
</tr>
<tr>
<td>
<button type="button" id="btnMSb2" aria-expanded="false" onclick="toggle(this.id,'#MS02b');" aria-controls="MS02b" aria-label="3 more from" aria-labelledby="btnMSb2 lblMSb2">
<svg xmlns="\http://www.w3.org/2000/svg"" viewBox="0 0 80 80" focusable="false"><path d="M70.3 13.8L40 66.3 9.7 13.8z"></path></svg>
</button>
</td>
<td>Batch2</td>
<td>Green</td>
<td>2AM</td>
<td>4AM</td>
<td>5AM</td>
</tr>
<tr id="MS02b" class="hidden">
<td></td>
<td colspan="5">
<div style="vertical-align: middle; text-align: center;height: 100px;">
<div class='process' style="border-right-style: none;border-left: 3px solid black; background-color: #16a085">Step1</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #DB2929">Step2</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #C0FF3E">Step3</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #5A6351">Step4</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #01C5BB">Step5</div>
<div class='process' style="color:#222; margin-left:-5px ; border-right: 3px solid black;border-left-style: none; background-color: #FF9A9E">Step6</div>
</div>
</td>
</tr>
<tr>
<td>
<button type="button" id="btnMSb3" aria-expanded="false" onclick="toggle(this.id,'#MS03b');" aria-controls="MS03b" aria-label="3 more from" aria-labelledby="btnMSb3 lblMSb3">
<svg xmlns="\http://www.w3.org/2000/svg"" viewBox="0 0 80 80" focusable="false"><path d="M70.3 13.8L40 66.3 9.7 13.8z"></path></svg>
</button>
</td>
<td>Batch3</td>
<td>Amber</td>
<td>10AM</td>
<td>11AM</td>
<td>10:30AM</td>
</tr>
<tr id="MS03b" class="hidden">
<td></td>
<td colspan="5">
<div style="vertical-align: middle; text-align: center;height: 100px;">
<div class='process' style="border-right-style: none;border-left: 3px solid black; background-color: #1abc9c">Step1</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #3498db">Step2</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #34495e">Step3</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #2ecc71">Step4</div>
<div class='process' style="margin-left:-5px ; border-right-style: none;border-left-style: none; background-color: #9b59b6">Step5</div>
<div class='process' style="margin-left:-5px ; border-right: 3px solid black;border-left-style: none; background-color: #e74c3c">Step6</div>
</div>
</td>
</tr>
</tbody>
</table>
</html>