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.
