There are three images displayed on a webpage, each accompanied by a list of three events. The desired functionality is that when a user clicks on an event, the corresponding information should be displayed below that event. Below is the HTML structure:
<div id="pics">
<div class="race_box">
<img src="images/run1.jpg" /><br />
<figcaption>5k/10k Events</figcaption>
<div class="races" id="5k">
<h3>5k/10 Events</h3>
<ul>
<li id="sprint">Mini Sprint</li>
<ul>
<li class="info">10/30/17<br/>Memorial Park<br/>Appleton</li>
</ul>
<li id="iron">Iron Horse</li>
<ul>
<li class="info">11/06/17<br/>Bay Beach Park<br/>Green Bay</li>
</ul>
<li id="twilight">Twilight Trail</li>
<ul>
<li class="info">11/13/17<br/>River's Edge Park<br/>Wrightstown</li>
</ul>
</ul>
</div><!-- End of '5k' div-->
</div> <!-- End of 'run1' div-->
Below is the corresponding CSS:
#header {
width: 100%;
height: 50px;
color: #0000ff; /*blue*/
padding-top: 25px;
padding-left: 10%
}
h1 {
margin-top: -10px;
}
#main {
position: absolute;
z-index: -999;
display: inline-block;
background-color: #808080; /*grey*/
width: 100%;
height: 250px;
padding: 1%;
width: 100%;
}
#pics {
width: 66%;
margin: 0 auto;
}
#pics figcaption {
color: #fff; /*white*/
}
.race_box {
float: left;
width: 215px;
margin-right: 7.3%;
margin-top: 25px;
}
li {
list-style-type: none;
padding: 5px;
color: blue;
display: block;
margin-left: -40px;
}
.info {
display: none;
color: black;
}
An attempt was made to make the event information toggle on click using JavaScript as below:
$(document).ready(function() {
$("li").click(function(){
$(this).children().children().toggle();
});
});
If you have any suggestions or solutions on how to achieve the desired functionality, your help would be greatly appreciated!