Is there a way to use jQuery to toggle a child element when the parent is clicked?

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!

Answer №1

Kindly enclose the contents of the ul within the li tag, and proceed to modify the jQuery as follows.

$(document).ready(function() {

  $("li").on("click", function() {
    $(this).find('li').toggle('info');
  });
});
#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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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
        <ul>
          <li class="info">10/30/17
            <br/>Memorial Park
            <br/>Appleton</li>
        </ul>
        </li>
        <li id="iron">Iron Horse
        <ul>
          <li class="info">11/06/17
            <br/>Bay Beach Park
            <br/>Green Bay</li>
        </ul>
        </li>
        <li id="twilight">Twilight Trail
        <ul>
          <li class="info">11/13/17
            <br/>River's Edge Park
            <br/>Wrightstown</li>
        </ul>
        </li>
      </ul>
    </div>
    <!--  End of '5k' div-->
  </div>
  <!-- End of 'run1' div-->

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a sleek grayscale effect when hovering with CSS is both simple and effective

My website features a grayscale logo that smoothly transitions to color upon hover. However, I am experiencing some issues with the smoothness of this transition when using CSS. Here is my current code: <img alt="TT ltd logo" src="./img/tt-logo.png" c ...

Guide to modifying the behavior of a dynamic dropdown menu

Jquery: $('body').on('change', '.combo', function() { var selectedValue = $(this).val(); if ($(this).find('option').size() > 2) { var newComboBox = $(this).clone(); var thisComboBoxIndex ...

Can a relative link with parameters but no path be used?

Can I omit the path from an href tag and begin with a question mark instead? For instance, if my website is https://example.com/mycgi, would it be acceptable to have a link like this: <a href="?foo=bar">bar</a>? I tested this on Fir ...

offspring of offspring in jquery animation remains stationary

I'm experiencing an issue with a jquery animation on containers that are set to 100% width and height. Specifically, the children elements that have position absolute move with the container, but when a child of a child has two instances of position a ...

MatDialog displaying no content

I found this tutorial on how to implement a simple dialog. The issue I'm facing is that the dialog appears empty with no errors in the console. Even after making changes to my dialog.component.html or dress-form.ts, nothing seems to reflect in the o ...

There seems to be an issue with the accurate calculation of the screen width while utilizing the scrollbar-gutter

Please take note: The scrollbar-gutter: stable; property is not compatible with Safari. Additionally, the issue seems to be specific to Chrome and works fine in Firefox. I have observed some unusual behavior when attempting to position elements fixed to t ...

The incorrect ordering of my array within a nested ng-repeat in AngularJS

I have extracted Json data from a mongodb database collection. Successfully displayed the keys of this json. Currently attempting to present an array in a table using a double ng-repeat in my view. Although I am close to achieving my desired outcome, th ...

Dynamically including and deleting classes upon clicking using React

Looking for a solution to handle a list of links. The goal is to add a class called "is-active" when a link is clicked, while also removing any existing "is-active" classes from other links. Only one link should have the "is-active" class at a time. This ...

Issue with displaying record attribute as a text variable

I'm currently attempting to retrieve the attribute odata.type from a record so that I can adjust my EditForm based on its value. Strangely, when I utilize a constant to achieve this and print it with console.log, it appears as follows: ƒ HWType(_ref ...

The button colors in Material Ui do not update properly after switching themes

React Material UI is being utilized in this project. Although the theme is being overridden, the colors of buttons and inputs remain unchanged. Here is how the Material UI theme is created in theme.js // @flow import { createMuiTheme } from '@materi ...

When a cookie is set in NextJS with a static export, it reverts back to its original

My current project involves building a multilingual website. To handle language selection, I have implemented a system where the chosen language is stored in a cookie and retrieved using getInitialProps in the _app file, which is then passed as a context A ...

What is the appropriate content-type to use when sending AJAX POST data?

Having an issue sending base64 image data using ajax post. I suspect the problem lies with the Content-Type value, as I have tried using application/json, text/json, and image/jpeg without success. Javascript function sendFormData(fD) { var urls = fD ...

Vue-Router triggers a "ReferenceError: jQuery is undefined" error

Setting up a new vue project and encountering a router error in the console: "[vue-router] Failed to resolve async component default: ReferenceError: jQuery is not defined [vue-router] uncaught error during route navigation: ReferenceError: jQuery is no ...

An issue arises with Autocomplete when attempting an ajax request and an error is

I'm struggling to implement jQuery Autocomplete on a text box, but it's not functioning properly. Below is my script for retrieving autocomplete list from the database. However, I encounter an error that displays an alert with an error message. ...

Is there a way to extract text from a span element using selenium?

Below is my current code implementation: from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC import time as t P ...

When the screen width falls below 768px, the columns should expand to full

Currently, I am using Bootstrap 3.3.7 for my project. I'm facing an issue where my images are not extending to full width when the viewport size is between > 630px and < 768px. The images have a width of 400px, which works fine for sizes > 7 ...

Ways to customize the appearance of CSS bootstrap 'col' elements?

I'm attempting to customize the styling of bootstrap CSS columns col-xl in order to display 5 or 6 cards/tiles on my webpage instead of just 4 (refer to attached image) without interfering with the other grid layouts. Unfortunately, I am currently str ...

iOS Chrome: Enabling Cookies with "Always Allow"

While the Safari browser on OSX has a setting under Privacy & Security -> Block Cookies -> Always Allow, enabling the storage of entries in the browser's local storage even when accessing pages from third party sites like those running in an ifr ...

Utilize Moment in React-Native to adjust the time zone format for the Vi Locale

I'm encountering a date formatting issue while using Moment in React-Native. Specifically, I have formatted the date to an English locale, but now I want it to also support the Vietnamese locale: Moment('2022-09-02T02:00:00+00:00') . ...

Error 500 on Firebase: Issue solving "firebase" in "firebase.js" not resolved

Struggling to incorporate Firebase into my latest React project, I keep encountering the dreaded "The development server returned response error code: 500." Despite creating a firebase.js file to house my Firebase configuration details, I am at a loss as ...