Billy J
Reputation: 121
Display a table on hover for elements in multiple rows and columns
I am trying to display a table on hover for elements in rows and columns. Note: The data in the rows and columns is also in an accordion. The data is in 4 columns and can be any number of rows. The data for each table to be displayed on hover contains 5 columns and can be any number of rows.
I have written the following CSS/HTML that displays all 4 columns of data (i.e. jockey name and number of rides) when the accordion is opened. Note: Each of these elements will have an associated table to be displayed on hover.
As you will see, I managed to display the associated table for each element on hover in the first row, however, I have been unable to do the same for any of the subsequent elements in the remaining rows and columns.
Note: For testing purposes, I have intentionally left the highlighting of each element in 'red' when hovered.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}.accordion {
background-color: #388070;
border: 1px;
border-bottom: 10px;
border-color: #f0f0f0;
border-radius: 3px;
border-style: solid;
border-width: 2px;
color: #ffffff;
cursor: pointer;
font-size: 12px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 2px;
padding: 12px;
outline: none;
text-align: left;
transition: 0.4s;
width: 100%;
margin: auto !Important;
}
.active,
.accordion:hover {
background-color: transparent;
border: 1px;
border-color: #388070;
border-style: solid;
border-width: 2px;
color: #388070;
}
.accordion:after {
content: "\002B";
/* Unicode character for "plus" sign (+) */
color: #388070;
font-size: 12px;
float: right;
margin-left: 5px;
}
.active:after {
color: #388070;
content: "\2212";
/* Unicode character for "minus" sign (-) */
}
.panel5 {
border: 1px;
border-bottom: 10px;
border-color: #f0f0f0;
border-style: solid;
border-width: 2px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 25px;
display: none;
background-color: white;
overflow: hidden;
}
.column {
float: left;
width: 25%;
font-size: 7pt;
color: black;
font-family: Lato;
font-weight: normal;
line-height: 1.2;
background-color: white;
column-gap: 3px;
}
.myrow {
float: left;
width: 100%;
font-size: 7pt;
color: black;
font-family: Lato;
font-weight: normal;
line-height: 1.2;
background-color: white;
}
.myrow:after {
content: "";
display: table;
clear: both;
}
a:link,
a:visited {
background-color: transparent;
color: #07342a;
display: inline-block;
font-family: 'Lato', sans-serif;
font-size: 12px;
text-align: center;
text-decoration: none;
}
a:hover,
a:active {
background-color: transparent;
color: #303030;
font-weight: bold;
}
#jockeys {
border-collapse: collapse;
display: none;
font-family: 'Lato', sans-serif;
font-size: 12px;
width: 100%;
}
#jockeys td,
#jockeys th {
border: 1px solid #dddddd;
padding: 8px;
}
#jockeys th {
background-color: #07342a;
color: white;
font-family: 'Lato', sans-serif;
font-size: 12px;
letter-spacing: 1px;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
}
#jockeys tr:nth-child(even) {
background-color: #f2f2f2;
}
#ShowJockey:hover+#jockeys {
display: block;
}
div.hoverPopUp {
border-collapse: collapse;
display: none;
font-family: 'Lato', sans-serif;
font-size: 9px;
text-align: center;
}
div.hoverPopUp td,
div.hoverPopUp th {
border: 1px solid #dddddd;
padding: 5px;
}
div.hoverPopUp th {
background-color: #07342a;
color: white;
font-family: 'Lato', sans-serif;
font-size: 9px;
font-weight: bold;
letter-spacing: 1px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
a.hoverHereToPopUp {
background-color: white;
color: #07342a;
font-family: 'Lato', sans-serif;
font-size: 12px;
letter-spacing: 1px;
line-height: 1.2;
margin-top: 1em;
padding-top: 10px;
text-align: left;
}
a:hover,
a:active {
background-color: transparent;
color: red;
font-weight: bold;
}
a.hoverHereToPopUp:hover+div.hoverPopUp {
display: block;
}
table.center {
margin-left: auto;
margin-right: auto;
border-spacing: 1;
}<button class="accordion">NUMBER OF RIDES PER JOCKEY (EXCLUDING SCRATCHINGS)</button>
<div class="panel5">
<div class="row">
<div class="column">
<a class="hoverHereToPopUp">ADAM HYERONIMUS HAS 5 RIDES.</a>
<div class="hoverPopUp">
<table class="center">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - ONE (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - ONE(1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 4</td>
<td>BIG FAT PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 6</td>
<td>PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 7</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 8</td>
<td>PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
</table>
</div>
<p>
<p align="left" style="line-height: 16px letter-spacing: 1px;">
<a href="#" id="ShowJockey">JAMES INNES JR. HAS 1 RIDE.</a>
</p>
<p>
<p align="left" style="line-height: 16px letter-spacing: 1px;">
<a href="#" id="ShowJockey">KERRIN MCEVOY HAS 6 RIDES.</a>
</p>
<p>
<p align="left" style="line-height: 16px letter-spacing: 1px;">
<a href="#" id="ShowJockey">SAM CLIPPERTON HAS 1 RIDE.</a>
</p>
</div>
<div class="column">
<a class="hoverHereToPopUp">ANDREW ADKINS HAS 1 RIDE.</a>
<div class="hoverPopUp">
<table class="center">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - TWO (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - TWO (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - TWO (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
</table>
</div>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">JAMES MCDONALD HAS 6 RIDES.</a>
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">NASH RAWILLER HAS 1 RIDE.</a>
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">TIM CLARK HAS 2 RIDES.</a>
</p>
</div>
<div class="column">
<a class="hoverHereToPopUp">BRENTON AVDULLA HAS 2 RIDES.</a>
<div class="hoverPopUp">
<table class="center">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - THREE (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - THREE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - THREE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 8</td>
<td>PURE FUEGO - THREE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
</table>
</div>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">JASON COLLETT HAS 3 RIDES.</a>
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">RACHEL KING HAS 2 RIDES.</a>
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">TOMMY BERRY HAS 3 RIDES.</a>
</p>
</div>
<div class="column">
<a class="hoverHereToPopUp">GLEN BOSS HAS 2 RIDES.</a>
<div class="hoverPopUp">
<table class="center">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - FOUR (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - FOUR (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 4</td>
<td>BIG FAT PURE FUEGO - FOUR (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - FOUR (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 7</td>
<td>ENTREAT - FOUR (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
</table>
</div>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">JEAN VAN OVERMEIRE (APPRENTICE) HAS 3 RIDES.</a>
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
<a href="#" id="ShowJockey">ROBBIE DOLAN HAS 4 RIDES.</a>
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
</p>
</div>
</div>
</div>If I attempt to add the same and code to the subsequent element(s) in the column DIV(s) (i.e. the elements currently contained within the paragraph tag, that should be row 2, row 3 and so on..., I lose the column structure & format, and the defined a href's are all misaligned and partially or completely hidden until hovered.
Note: The jockey names should appear in alphabetical order from left to right.
In addition but not as important as the aforementioned, it appears that the table displayed is limited to the width of the column. When I attempt to expand the width, the right side of the table gets hidden by the next column (table is behind columns to its right). I'd also like to know if there's a way to get around this and display the table "on top" (over) of the additional columns so I can expand the width.
Apologies for the length of the HTML but I think it's required for you to see what's going on.
Upvotes: 1
Views: 1677
Answers (3)
Chiel
Reputation: 1442
I reckon I have found another possible solution to your problem. With this solution, contrary to the other also great answers, there is no separate 'hover me' or 'click me' button. Just hover over a cell and view the associated table.
I have cleaned up and changed your html code a bit to make it a <table>. Which comes with a lot of benefits such as a nice and clean structure.
Now, each individual data cell in the .overall table has an attribute onmouseover="showDetail(this.id)"so that, when you hover over the element it fires that function and passes the id (Jockey-#) to the function showDetail.
This function first sets the opacity of all the other cells to 0.3 to make the .hoverPopUp stand more out to the background. Next, the opacity of the hovered cell is set to 1. So that users know what the table is about.
Then the x and y position of the cell itself are calculated to set the position of the detailTable just below the selected cell.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
function showDetail(jockeyId) {
setClassOpacity("hoverHereToPopUp", 0.3);
//get the selected cell
var jockeyCell = document.getElementById(jockeyId);
let jockeyDetailId = jockeyId + '-detail';
jockeyCell.style.opacity = 1;
jockeyCell.onmouseout = function() {
if (detail = document.getElementById(jockeyDetailId)) {
detail.style.display = "none";
}
setClassOpacity("hoverHereToPopUp", 1);
}
//get the relative parent of each cell
// cell <tr> <tbody> <table> <div id="panel-#">
var jockeyParent = jockeyCell.parentElement.parentElement.parentElement.parentElement;
//calculate the position of the selected cell
let cellPos = {};
//get the position relative to it's parent
let bodyRect = jockeyParent.getBoundingClientRect();
let jockeyRect = jockeyCell.getBoundingClientRect();
cellPos.x = jockeyRect.left - bodyRect.left;
cellPos.y = jockeyRect.top - bodyRect.top;
//set position of ".hoverPopUp" thus the detail tabe
var dataDiv = document.getElementById(jockeyDetailId);
if (!dataDiv) {
//no table specified so create an empty one just for now
let temporaryTable = `<div class="hoverPopUp" id="${jockeyDetailId}">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>No data</td>
<td>No data</td>
<td>No data</td>
<td>No data</td>
<td>No data</td>
</tr>
</table>
</div>`;
jockeyParent.innerHTML += temporaryTable;
dataDiv = document.getElementById(jockeyDetailId);
}
if (cellPos.x < bodyRect.width / 2) {
dataDiv.style.left = 0;
} else {
dataDiv.style.right = 0;
}
dataDiv.style.top = (cellPos.y + 1.5 * jockeyRect.height) + "px";
dataDiv.style.display = "block";
}
//set the opacity of all the other elements lower to increase clarity and readability
function setClassOpacity(className, opacity) {
var cells = document.getElementsByClassName(className);
for (var i = 0; i < cells.length; i++) {
var cell = cells[i];
cell.style.opacity = opacity;
}
}.accordion {
background-color: #388070;
border: 2px solid #f0f0f0 border-bottom: 10px;
color: #ffffff;
cursor: pointer;
font-size: 12px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 2px;
padding: 12px;
outline: none;
text-align: left;
transition: 0.4s;
width: 100%;
margin: auto !Important;
}
.accordion:first-child {
display: block;
}
.active,
.accordion:hover {
background-color: transparent;
border: 1px;
border-color: #388070;
border-style: solid;
border-width: 2px;
color: #388070;
}
.accordion:after {
content: "\002B";
/* Unicode character for "plus" sign (+) */
color: #388070;
font-size: 12px;
float: right;
margin-left: 5px;
}
.active:after {
color: #388070;
content: "\2212";
/* Unicode character for "minus" sign (-) */
}
/* Renamed .panel5 to .panel */
/* Each panel has now an id of #panel-# */
.panel {
border: 2px solid #f0f0f0;
border-bottom: 10px;
padding: 5px 5px 5px 25px;
display: none;
background-color: white;
position: relative;
width: 95%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.panel:first-child {
display: block;
}
.overall {
border-collapse: collapse;
width: 90%;
}
.overall td {
font-size: 9pt;
color: black;
font-family: Lato;
font-weight: normal;
line-height: 1.2;
background-color: white;
padding: 5px;
}
.overall tr {
font-size: 7pt;
color: black;
font-family: 'Lato';
font-weight: normal;
line-height: 1.2;
background-color: white;
}
/* Default table styles above*/
.hoverPopUp {
display: none;
padding: 10px;
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
position: absolute;
font-family: 'Lato', sans-serif;
font-size: 9px;
text-align: center;
/* Adds some depth and clarity */
z-index: 5 !important;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 3px 3px 5px 6px #ccc;
/* Firefox 3.5 - 3.6 */
box-shadow: 3px 3px 5px 6px #ccc;
}
.jockeys {
margin-left: auto;
margin-right: auto;
border-spacing: 1;
border-collapse: collapse;
font-family: 'Lato', sans-serif;
font-size: 12px;
width: 100%;
}
.jockeys td,
.jockeys th {
border: 1px solid #dddddd;
padding: 8px;
}
.jockeys th {
background-color: #07342a;
color: white;
font-family: 'Lato', sans-serif;
font-size: 12px;
letter-spacing: 1px;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
}
.jockeys tr:nth-child(even) {
background-color: #f2f2f2;
}<body>
<h3>Some nice data</h3>
<button class="accordion">NUMBER OF RIDES PER JOCKEY (EXCLUDING SCRATCHINGS)</button>
<div class="panel" id="panel-1">
<table class="overall">
<tbody>
<tr>
<td id="Jockey-1" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">ADAM HYERONIMUS HAS 5 RIDES.</td>
<td id="Jockey-2" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JAMES INNES JR. HAS 1 RIDE.</td>
<td id="Jockey-3" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">KERRIN MCEVOY HAS 6 RIDES.</td>
<td id="Jockey-4" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">SAM CLIPPERTON HAS 1 RIDE.</td>
</tr>
<tr>
<td id="Jockey-5" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">ANDREW ADKINS HAS 1 RIDE.</td>
<td id="Jockey-6" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JAMES MCDONALD HAS 6 RIDES.</td>
<td id="Jockey-7" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">NASH RAWILLER HAS 1 RIDE.</td>
<td id="Jockey-8" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">TIM CLARK HAS 2 RIDES.</td>
</tr>
<tr>
<td id="Jockey-9" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">BRENTON AVDULLA HAS 2 RIDES.</td>
<td id="Jockey-10" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JASON COLLETT HAS 3 RIDES.</td>
<td id="Jockey-11" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">RACHEL KING HAS 2 RIDES.</td>
<td id="Jockey-12" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">TOMMY BERRY HAS 3 RIDES.</td>
</tr>
<tr>
<td id="Jockey-13" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">GLEN BOSS HAS 2 RIDES.</td>
<td id="Jockey-14" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JEAN VAN OVERMEIRE (APPRENTICE) HAS 3 RIDES.</td>
<td id="Jockey-15" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">ROBBIE DOLAN HAS 4 RIDES.</td>
<td id="Jockey-16" class="hoverHereToPopUp"></td>
</tr>
</tbody>
</table>
<div class="hoverPopUp" id="Jockey-1-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - ONE (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - ONE(1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 4</td>
<td>BIG FAT PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 6</td>
<td>PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 7</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 8</td>
<td>PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-6-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - TWO (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - TWO (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - TWO (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-11-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - THREE (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - THREE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - THREE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 8</td>
<td>PURE FUEGO - THREE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-13-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
No data available
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-14-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - FOUR (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - FOUR (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 4</td>
<td>BIG FAT PURE FUEGO - FOUR (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - FOUR (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 7</td>
<td>ENTREAT - FOUR (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
</table>
</div>
</div>
<p>Well well more data</p>
<button class="accordion">NUMBER OF RIDES PER JOCKEY (EXCLUDING SCRATCHINGS)</button>
<div class="panel" id="panel-2">
<table class="overall">
<tbody>
<tr>
<td id="Jockey-17" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">ADAM HYERONIMUS HAS 5 RIDES.</td>
<td id="Jockey-18" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JAMES INNES JR. HAS 1 RIDE.</td>
<td id="Jockey-19" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">KERRIN MCEVOY HAS 6 RIDES.</td>
<td id="Jockey-20" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">SAM CLIPPERTON HAS 1 RIDE.</td>
</tr>
<tr>
<td id="Jockey-21" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">ANDREW ADKINS HAS 1 RIDE.</td>
<td id="Jockey-22" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JAMES MCDONALD HAS 6 RIDES.</td>
<td id="Jockey-23" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">NASH RAWILLER HAS 1 RIDE.</td>
<td id="Jockey-24" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">TIM CLARK HAS 2 RIDES.</td>
</tr>
<tr>
<td id="Jockey-25" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">BRENTON AVDULLA HAS 2 RIDES.</td>
<td id="Jockey-26" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JASON COLLETT HAS 3 RIDES.</td>
<td id="Jockey-27" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">RACHEL KING HAS 2 RIDES.</td>
<td id="Jockey-28" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">TOMMY BERRY HAS 3 RIDES.</td>
</tr>
<tr>
<td id="Jockey-29" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">GLEN BOSS HAS 2 RIDES.</td>
<td id="Jockey-30" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JEAN VAN OVERMEIRE (APPRENTICE) HAS 3 RIDES.</td>
<td id="Jockey-31" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">ROBBIE DOLAN HAS 4 RIDES.</td>
<td id="Jockey-32" class="hoverHereToPopUp"></td>
</tr>
<tbody>
</table>
<div class="hoverPopUp" id="Jockey-17-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - ONE (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - ONE(1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 4</td>
<td>BIG FAT PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 6</td>
<td>PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 7</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 8</td>
<td>PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-22-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - TWO (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - TWO (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - TWO (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-28-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - THREE (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - THREE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - THREE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 8</td>
<td>PURE FUEGO - THREE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-32-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
No data available
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-30-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - FOUR (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - FOUR (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 4</td>
<td>BIG FAT PURE FUEGO - FOUR (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - FOUR (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 7</td>
<td>ENTREAT - FOUR (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
</table>
</div>
</div>
<br><br><br><br><br><br>
</body>Btw, where do you get this data from? If it is an api or something, I would highly advise you to create the tables with code, on page load. That will save you a lot of time.
Hope this helps! If not, please comment
Edit
I have made the standardTable now relative. Also instead of .panel5 each panel now has an class of panel and an id of panel-# in order to identify them. I assumed that every jockey in every panel is unique, if that isn't the case I might have to rewrite some bits. Also added a box-shadow and a z-index to the detail tables to make them more visible.
Hope this helps!
Upvotes: 1
doğukan
Reputation: 27389
An id cannot be used more than once on a page. So I replaced them with
class. (#jockeys->.jockeys,#ShowJockey->.ShowJockey)You cannot put
divin aptag. So we have to replaceptags withdiv.
In short, it is impossible to place a
<div>element inside a<p>in the DOM because the opening<div>tag will automatically close the<p>element. Ref
I made a snippet.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}.accordion {
background-color: #388070;
border: 1px;
border-bottom: 10px;
border-color: #f0f0f0;
border-radius: 3px;
border-style: solid;
border-width: 2px;
color: #ffffff;
cursor: pointer;
font-size: 12px;
padding: 12px;
outline: none;
text-align: left;
transition: 0.4s;
width: 100%;
margin: auto !Important;
}
.active,
.accordion:hover {
background-color: transparent;
border: 1px;
border-color: #388070;
border-style: solid;
border-width: 2px;
color: #388070;
}
.accordion:after {
content: "\002B";
/* Unicode character for "plus" sign (+) */
color: #388070;
font-size: 12px;
float: right;
margin-left: 5px;
}
.active:after {
color: #388070;
content: "\2212";
/* Unicode character for "minus" sign (-) */
}
.panel5 {
border: 1px;
border-bottom: 10px;
border-color: #f0f0f0;
border-style: solid;
border-width: 2px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 25px;
display: none;
background-color: white;
overflow: hidden;
}
.column {
float: left;
width: 25%;
font-size: 7pt;
color: black;
font-family: Lato;
font-weight: normal;
line-height: 1.2;
background-color: white;
column-gap: 3px;
}
.myrow {
float: left;
width: 100%;
font-size: 7pt;
color: black;
font-family: Lato;
font-weight: normal;
line-height: 1.2;
background-color: white;
}
.myrow:after {
content: "";
display: table;
clear: both;
}
a:link,
a:visited {
background-color: transparent;
color: #07342a;
display: inline-block;
font-family: 'Lato', sans-serif;
font-size: 12px;
text-align: center;
text-decoration: none;
}
a:hover,
a:active {
background-color: transparent;
color: #303030;
font-weight: bold;
}
.jockeys {
border-collapse: collapse;
display: none;
font-family: 'Lato', sans-serif;
font-size: 12px;
width: 100%;
}
.jockeys td,
.jockeys th {
border: 1px solid #dddddd;
padding: 8px;
}
.jockeys th {
background-color: #07342a;
color: white;
font-family: 'Lato', sans-serif;
font-size: 12px;
letter-spacing: 1px;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
}
.jockeys tr:nth-child(even) {
background-color: #f2f2f2;
}
.ShowJockey:hover+.jockeys {
display: block;
}
.hoverPopUp {
border-collapse: collapse;
display: none;
font-family: 'Lato', sans-serif;
font-size: 9px;
text-align: center;
}
.hoverPopUp td,
.hoverPopUp th {
border: 1px solid #dddddd;
padding: 5px;
}
.hoverPopUp th {
background-color: #07342a;
color: white;
font-family: 'Lato', sans-serif;
font-size: 9px;
font-weight: bold;
letter-spacing: 1px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
a.hoverHereToPopUp {
background-color: white;
color: #07342a;
font-family: 'Lato', sans-serif;
font-size: 12px;
letter-spacing: 1px;
line-height: 1.2;
text-align: left;
}
a:hover,
a:active {
background-color: transparent;
color: red;
font-weight: bold;
}
a.hoverHereToPopUp:hover+.hoverPopUp {
display: block;
}
table.center {
margin-left: auto;
margin-right: auto;
border-spacing: 1;
}
.parentDiv {
line-height: 16px;
letter-spacing: 1px;
padding-top: 10px;
text-align: left;
}<button class="accordion">NUMBER OF RIDES PER JOCKEY (EXCLUDING SCRATCHINGS)</button>
<div class="panel5">
<div class="row">
<div class="column">
<a class="hoverHereToPopUp">hover here</a>
<div class='hoverPopUp'> <table class='center'> <tr> <th>RACECOURSE</th> <th>RACE NO.</th> <th>RUNNER</th> <th>TRAINER</th> <th>TD RATING</th> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 1</td> <td>ROCK AROUND THE CLOCK - ONE (8)</td> <td>DAVID & BEN HAYES & TOM DABERNIG</td> <td> <center>AA</center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 2</td> <td>PURE FUEGO - ONE(1)</td> <td>CAMERON CROCKETT</td> <td> <center> <font color='green'><b>AAA</b></font> </center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 3</td> <td>ENTREAT - ONE (8)</td> <td>CAMERON CROCKETT</td> <td> <center>AA</center> </td> </tr> </table> </div>
<div class="parentDiv">
<a href="#" class="hoverHereToPopUp" >JAMES INNES JR. HAS 1 RIDE.</a> <div class="parentDiv">
<a href="#" class="ShowJockey hoverHereToPopUp">KERRIN MCEVOY HAS 6 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey hoverHereToPopUp">SAM CLIPPERTON HAS 1 RIDE.</a>
</div>
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">ANDREW ADKINS HAS 1 RIDE.</a>
<div class="parentDiv">
<a href="#" class="ShowJockey hoverHereToPopUp">hover here</a>
<div class='hoverPopUp'> <table class='center'> <tr> <th>RACECOURSE</th> <th>RACE NO.</th> <th>RUNNER</th> <th>TRAINER</th> <th>TD RATING</th> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 1</td> <td>ROCK AROUND THE CLOCK - ONE (8)</td> <td>DAVID & BEN HAYES & TOM DABERNIG</td> <td> <center>AA</center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 2</td> <td>PURE FUEGO - ONE(1)</td> <td>CAMERON CROCKETT</td> <td> <center> <font color='green'><b>AAA</b></font> </center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 3</td> <td>ENTREAT - ONE (8)</td> <td>CAMERON CROCKETT</td> <td> <center>AA</center> </td> </tr> </table> </div>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">NASH RAWILLER HAS 1 RIDE.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">TIM CLARK HAS 2 RIDES.</a>
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">BRENTON AVDULLA HAS 2 RIDES.</a>
<div class="parentDiv">
<a href="#" class="ShowJockey">JASON COLLETT HAS 3 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">RACHEL KING HAS 2 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">TOMMY BERRY HAS 3 RIDES.</a>
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">GLEN BOSS HAS 2 RIDES.</a>
<div class="parentDiv">
<a href="#" class="ShowJockey">JEAN VAN OVERMEIRE (APPRENTICE) HAS 3 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">ROBBIE DOLAN HAS 4 RIDES.</a>
</div>
<div class="parentDiv">
</div>
</div>
</div>
</div>Also here I show the tables with a much better method. But you have to give your tables with the data-hover-content attribute. See on 1. and 6. links.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
const links = document.querySelectorAll(".hoverHereToPopUp");
[...links].forEach(link => {
link.addEventListener("mouseover", handleMouseOver);
link.addEventListener("mousemove", handleMouseMove);
link.addEventListener("mouseleave", handleMouseLeave);
});
function handlePosition(e) {
const ID = e.target.getAttribute("data-hover-id");
const wrapper = document.getElementById(ID);
let top = "";
if (!(e.target.getBoundingClientRect().top + wrapper.offsetHeight > innerHeight)) {
top = `${e.clientY + e.target.offsetHeight}px`;
} else {
top = `${e.clientY - (wrapper.offsetHeight + e.target.offsetHeight)}px`;
}
if (`${e.clientX -
wrapper.offsetWidth / 2}` <= 0) {
return `position: fixed; left: 0px; top:${top}`;
} else {
return `position: fixed; left: ${e.clientX -
wrapper.offsetWidth / 2}px; top:${top}`;
}
}
function handleMouseOver(e) {
const hoverContent = e.target.getAttribute("data-hover-content");
const ID = Math.random()
.toString(36)
.substr(2, 9);
const wrapper = document.createElement("DIV");
e.target.setAttribute("data-hover-id", ID);
wrapper.setAttribute("data-hover-wrapper", "");
wrapper.setAttribute("id", ID);
wrapper.setAttribute("style", "opacity: 0; transform: scale(.8)");
wrapper.innerHTML = hoverContent;
document.body.append(wrapper);
wrapper.setAttribute("style", handlePosition(e));
}
function handleMouseLeave(e) {
const ID = e.target.getAttribute("data-hover-id");
document.getElementById(ID).style.opacity = 0;
document.getElementById(ID).style.transform = "scale(.8)";
setTimeout(() => {
document.getElementById(ID).remove();
}, 150);
}
function handleMouseMove(e) {
const ID = e.target.getAttribute("data-hover-id");
const wrapper = document.getElementById(ID);
wrapper.setAttribute("style", handlePosition(e));
}
window.addEventListener('scroll', () => {
const wrapper = document.querySelector('[data-hover-wrapper]');
if (wrapper) wrapper.remove();
});.accordion {
background-color: #388070;
border: 1px;
border-bottom: 10px;
border-color: #f0f0f0;
border-radius: 3px;
border-style: solid;
border-width: 2px;
color: #ffffff;
cursor: pointer;
font-size: 12px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 2px;
padding: 12px;
outline: none;
text-align: left;
transition: 0.4s;
width: 100%;
margin: auto !Important;
}
.active,
.accordion:hover {
background-color: transparent;
border: 1px;
border-color: #388070;
border-style: solid;
border-width: 2px;
color: #388070;
}
.accordion:after {
content: "\002B";
/* Unicode character for "plus" sign (+) */
color: #388070;
font-size: 12px;
float: right;
margin-left: 5px;
}
.active:after {
color: #388070;
content: "\2212";
/* Unicode character for "minus" sign (-) */
}
.panel5 {
border: 1px;
border-bottom: 10px;
border-color: #f0f0f0;
border-style: solid;
border-width: 2px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 25px;
display: none;
background-color: white;
overflow: hidden;
}
.column {
float: left;
width: 25%;
font-size: 7pt;
color: black;
font-family: Lato;
font-weight: normal;
line-height: 1.2;
background-color: white;
column-gap: 3px;
}
.myrow {
float: left;
width: 100%;
font-size: 7pt;
color: black;
font-family: Lato;
font-weight: normal;
line-height: 1.2;
background-color: white;
}
.myrow:after {
content: "";
display: table;
clear: both;
}
a:link,
a:visited {
background-color: transparent;
color: #07342a;
display: inline-block;
font-family: 'Lato', sans-serif;
font-size: 12px;
text-align: center;
text-decoration: none;
}
a:hover,
a:active {
background-color: transparent;
color: #303030;
font-weight: bold;
}
.jockeys {
border-collapse: collapse;
display: none;
font-family: 'Lato', sans-serif;
font-size: 12px;
width: 100%;
}
.jockeys td,
.jockeys th {
border: 1px solid #dddddd;
padding: 8px;
}
.jockeys th {
background-color: #07342a;
color: white;
font-family: 'Lato', sans-serif;
font-size: 12px;
letter-spacing: 1px;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
}
.jockeys tr:nth-child(even) {
background-color: #f2f2f2;
}
.ShowJockey:hover+.jockeys {
display: block;
}
.hoverPopUp {
border-collapse: collapse;
font-family: 'Lato', sans-serif;
font-size: 9px;
text-align: center;
background-color: #fff;
}
.hoverPopUp td,
.hoverPopUp th {
border: 1px solid #dddddd;
padding: 5px;
}
.hoverPopUp th {
background-color: #07342a;
color: white;
font-family: 'Lato', sans-serif;
font-size: 9px;
font-weight: bold;
letter-spacing: 1px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
a.hoverHereToPopUp {
background-color: white;
color: #07342a;
font-family: 'Lato', sans-serif;
font-size: 12px;
letter-spacing: 1px;
line-height: 1.2;
text-align: left;
}
a:hover,
a:active {
background-color: transparent;
color: red;
font-weight: bold;
}
table.center {
margin-left: auto;
margin-right: auto;
border-spacing: 1;
}
[data-hover-wrapper] {
transition: opacity .3s, transform .3s
}
.parentDiv {
line-height: 16px;
letter-spacing: 1px;
padding-top: 10px;
text-align: left;
}<button class="accordion">NUMBER OF RIDES PER JOCKEY (EXCLUDING SCRATCHINGS)</button>
<div class="panel5">
<div class="row">
<div class="column">
<a class="hoverHereToPopUp" data-hover-content="<div class='hoverPopUp'> <table class='center'> <tr> <th>RACECOURSE</th> <th>RACE NO.</th> <th>RUNNER</th> <th>TRAINER</th> <th>TD RATING</th> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 1</td> <td>ROCK AROUND THE CLOCK - ONE (8)</td> <td>DAVID & BEN HAYES & TOM DABERNIG</td> <td> <center>AA</center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 2</td> <td>PURE FUEGO - ONE(1)</td> <td>CAMERON CROCKETT</td> <td> <center> <font color='green'><b>AAA</b></font> </center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 3</td> <td>ENTREAT - ONE (8)</td> <td>CAMERON CROCKETT</td> <td> <center>AA</center> </td> </tr> </table> </div>">hover here
</a>
<div class="parentDiv">
<a href="#" class="hoverHereToPopUp" >JAMES INNES JR. HAS 1 RIDE.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey hoverHereToPopUp">KERRIN MCEVOY HAS 6 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey hoverHereToPopUp">SAM CLIPPERTON HAS 1 RIDE.</a>
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">ANDREW ADKINS HAS 1 RIDE.</a>
<div class="parentDiv">
<a href="#" class="ShowJockey hoverHereToPopUp" data-hover-content="<div class='hoverPopUp'> <table class='center'> <tr> <th>RACECOURSE</th> <th>RACE NO.</th> <th>RUNNER</th> <th>TRAINER</th> <th>TD RATING</th> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 1</td> <td>ROCK AROUND THE CLOCK - ONE (8)</td> <td>DAVID & BEN HAYES & TOM DABERNIG</td> <td> <center>AA</center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 2</td> <td>PURE FUEGO - ONE(1)</td> <td>CAMERON CROCKETT</td> <td> <center> <font color='green'><b>AAA</b></font> </center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 3</td> <td>ENTREAT - ONE (8)</td> <td>CAMERON CROCKETT</td> <td> <center>AA</center> </td> </tr> </table> </div>">hover here</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">NASH RAWILLER HAS 1 RIDE.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">TIM CLARK HAS 2 RIDES.</a>
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">BRENTON AVDULLA HAS 2 RIDES.</a>
<div class="parentDiv">
<a href="#" class="ShowJockey">JASON COLLETT HAS 3 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">RACHEL KING HAS 2 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">TOMMY BERRY HAS 3 RIDES.</a>
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">GLEN BOSS HAS 2 RIDES.</a>
<div class="parentDiv">
<a href="#" class="ShowJockey">JEAN VAN OVERMEIRE (APPRENTICE) HAS 3 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">ROBBIE DOLAN HAS 4 RIDES.</a>
</div>
<div class="parentDiv">
</div>
</div>
</div>
</div>I compressed the table's code because Stackoverflow snippets does not allow to too much code.
Here's an another example. (I think best) This works with click.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
const links = document.querySelectorAll(".hoverHereToPopUp");
[...links].forEach((link) => {
link.addEventListener("click", handleClick);
});
function handlePosition(e) {
const ID = e.target.getAttribute("data-hover-id");
const wrapper = document.getElementById(ID);
if (`${e.target.getBoundingClientRect().left}` <= 0) {
return `position: fixed; left: 0px; top:${
e.target.getBoundingClientRect().top + 20
}`;
} else {
return `position: fixed; left: ${
e.target.getBoundingClientRect().left
}px; top:${e.target.getBoundingClientRect().top + 20}px`;
}
}
function handleClick(e) {
const others = document.querySelectorAll("[data-hover-wrapper]");
others.forEach((p) => {
p.style.opacity = 0;
p.style.transform = "scale(.8)";
setTimeout(() => {
p.remove();
}, 150);
});
const hoverContent = e.target.getAttribute("data-hover-content");
const ID = Math.random().toString(36).substr(2, 9);
const wrapper = document.createElement("DIV");
e.target.setAttribute("data-hover-id", ID);
wrapper.setAttribute("data-hover-wrapper", "");
wrapper.setAttribute("id", ID);
wrapper.setAttribute("style", "opacity: 0; transform: scale(.8)");
wrapper.innerHTML = hoverContent;
document.body.append(wrapper);
wrapper.setAttribute("style", handlePosition(e));
}
document.addEventListener("click", (e) => {
const specifiedElement = document.querySelectorAll("[data-hover-wrapper]");
specifiedElement.forEach((p) => {
let isClickInside = p.contains(event.target);
if (
!isClickInside &&
!event.target.classList.contains("hoverHereToPopUp")
) {
const others = document.querySelectorAll("[data-hover-wrapper]");
others.forEach((p) => {
p.style.opacity = 0;
p.style.transform = "scale(.8)";
setTimeout(() => {
p.remove();
}, 150);
});
}
});
});/* I minified the css because stackoverflow does not allow to over 30000 character body. this css same with the above snippet.*/
.accordion{background-color:#388070;border:1px;border-bottom:10px;border-color:#f0f0f0;border-radius:3px;border-style:solid;border-width:2px;color:#fff;cursor:pointer;font-size:12px;font-weight:400;line-height:1.2;letter-spacing:2px;padding:12px;outline:0;text-align:left;transition:.4s;width:100%;margin:auto!important}.accordion:hover,.active{background-color:transparent;border:1px;border-color:#388070;border-style:solid;border-width:2px;color:#388070}.accordion:after{content:"\002B";color:#388070;font-size:12px;float:right;margin-left:5px}.active:after{color:#388070;content:"\2212"}.panel5{border:1px;border-bottom:10px;border-color:#f0f0f0;border-style:solid;border-width:2px;padding-top:5px;padding-right:5px;padding-bottom:5px;padding-left:25px;display:none;background-color:#fff;overflow:hidden}.column{float:left;width:25%;font-size:7pt;color:#000;font-family:Lato;font-weight:400;line-height:1.2;background-color:#fff;column-gap:3px}.myrow{float:left;width:100%;font-size:7pt;color:#000;font-family:Lato;font-weight:400;line-height:1.2;background-color:#fff}.myrow:after{content:"";display:table;clear:both}a:link,a:visited{background-color:transparent;color:#07342a;display:inline-block;font-family:Lato,sans-serif;font-size:12px;text-align:center;text-decoration:none}a:active,a:hover{background-color:transparent;color:#303030;font-weight:700}.jockeys{border-collapse:collapse;display:none;font-family:Lato,sans-serif;font-size:12px;width:100%}.jockeys td,.jockeys th{border:1px solid #ddd;padding:8px}.jockeys th{background-color:#07342a;color:#fff;font-family:Lato,sans-serif;font-size:12px;letter-spacing:1px;padding-top:12px;padding-bottom:12px;text-align:left}.jockeys tr:nth-child(even){background-color:#f2f2f2}.ShowJockey:hover+.jockeys{display:block}.hoverPopUp{border-collapse:collapse;font-family:Lato,sans-serif;font-size:9px;text-align:center;background-color:#fff}.hoverPopUp td,.hoverPopUp th{border:1px solid #ddd;padding:5px}.hoverPopUp th{background-color:#07342a;color:#fff;font-family:Lato,sans-serif;font-size:9px;font-weight:700;letter-spacing:1px;padding-top:5px;padding-bottom:5px;text-align:center}a.hoverHereToPopUp{background-color:#fff;color:#07342a;font-family:Lato,sans-serif;font-size:12px;letter-spacing:1px;line-height:1.2;text-align:left}a:active,a:hover{background-color:transparent;color:red;font-weight:700}table.center{margin-left:auto;margin-right:auto;border-spacing:1}[data-hover-wrapper]{transition:opacity .3s,transform .3s}.parentDiv{line-height:16px;letter-spacing:1px;padding-top:10px;text-align:left}<button class="accordion">NUMBER OF RIDES PER JOCKEY (EXCLUDING SCRATCHINGS)</button>
<div class="panel5">
<div class="row">
<div class="column">
<a class="hoverHereToPopUp" data-hover-content="<div class='hoverPopUp'> <table class='center'> <tr> <th>RACECOURSE</th> <th>RACE NO.</th> <th>RUNNER</th> <th>TRAINER</th> <th>TD RATING</th> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 1</td> <td>ROCK AROUND THE CLOCK - ONE (8)</td> <td>DAVID & BEN HAYES & TOM DABERNIG</td> <td> <center>AA</center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 2</td> <td>PURE FUEGO - ONE(1)</td> <td>CAMERON CROCKETT</td> <td> <center> <font color='green'><b>AAA</b></font> </center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 3</td> <td>ENTREAT - ONE (8)</td> <td>CAMERON CROCKETT</td> <td> <center>AA</center> </td> </tr> </table> </div>">click here
</a>
<div class="parentDiv">
<a href="#" class="hoverHereToPopUp" >JAMES INNES JR. HAS 1 RIDE.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey hoverHereToPopUp">KERRIN MCEVOY HAS 6 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey hoverHereToPopUp">SAM CLIPPERTON HAS 1 RIDE.</a>
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">ANDREW ADKINS HAS 1 RIDE.</a><div class="parentDiv">
<a href="#" class="ShowJockey hoverHereToPopUp" data-hover-content="<div class='hoverPopUp'> <table class='center'> <tr> <th>RACECOURSE</th> <th>RACE NO.</th> <th>RUNNER</th> <th>TRAINER</th> <th>TD RATING</th> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 1</td> <td>ROCK AROUND THE CLOCK - ONE (8)</td> <td>DAVID & BEN HAYES & TOM DABERNIG</td> <td> <center>AA</center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 2</td> <td>PURE FUEGO - ONE(1)</td> <td>CAMERON CROCKETT</td> <td> <center> <font color='green'><b>AAA</b></font> </center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 3</td> <td>ENTREAT - ONE (8)</td> <td>CAMERON CROCKETT</td> <td> <center>AA</center> </td> </tr> </table> </div>">click here</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">NASH RAWILLER HAS 1 RIDE.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">TIM CLARK HAS 2 RIDES.</a>
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">BRENTON AVDULLA HAS 2 RIDES.</a>
<div class="parentDiv">
<a href="#" class="ShowJockey">JASON COLLETT HAS 3 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">RACHEL KING HAS 2 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">TOMMY BERRY HAS 3 RIDES.</a>
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">GLEN BOSS HAS 2 RIDES.</a>
<div class="parentDiv">
<a href="#" class="ShowJockey">JEAN VAN OVERMEIRE (APPRENTICE) HAS 3 RIDES.</a>
</div>
<div class="parentDiv">
<a href="#" class="ShowJockey">ROBBIE DOLAN HAS 4 RIDES.</a>
</div>
<div class="parentDiv">
</div>
</div>
</div>
</div>Upvotes: 2
vaasav kumar
Reputation: 186
Let me revise your requirements, You will create a table with X rows & Y columns, on hovering any cell you need to show another table right ?
First I would suggest that instead of tables you can go for 'flex' or 'grid' so that DOM will be created in less time than for tables.
Now consider a table with X rows & Y columns, for each cell you can set onmouseover event.
<td onmouseover=showAssociatedTable(cellId)>
function showAssociatedTable(cellId) {
//here you can append associated table or
//you can toggle css for associated table with display: 'none' or 'block'
}
Upvotes: 1
Related Questions
- Pure Javascript table column hover effect?
- How to create hover effect in html table using css?
- jQuery hover on tables
- Hover on Table Data
- How to display content of respective table cell on hover table row?
- Highlighting row and column of corresponding element of each table on hover
- Making a cell visible on row hover
- Making table data appear on hover (javascript/jQuery or css)
- How to display table on hover using only css?
- Add Hover display for table cell