Displaying and concealing animation subcategories

I wanted to add animation to the sub-categories in my code snippet located at: this link so that they show up when I hover over the category name. Unfortunately, my current solution didn't produce the desired result.

<script>
$(document).ready(function(){

 $("#m").hover(
   function () {
       $(this).children('ul').show();
      },
      function () {
        $(this).children('ul').hide();
      }
   );

});
</script>
  • What could be causing this issue?
  • Any suggestions on how to troubleshoot and fix it?

Answer №1

You've been looking for child elements (ul) of an #m element, but there are no such children

It seems like you meant to nest that hidden <ul> inside the li with the id m

So all you need to do is

  <li id="m"><a href="#">Fine Photographs</a></li>
  <ul  class="hide">
    <li><a href="catalog_photographs_19.php" style="margin-left:2cm; width: 2cm;" >19th century </a></li>
    <li><a href="catalog_photographs_20.php" style="margin-left:2cm; width: 2cm;"  >20th century </a></li>
  </ul>

to

  <li id="m"><a href="#">Fine Photographs</a>
    <ul  class="hide">
    <li><a href="catalog_photographs_19.php" style="margin-left:2cm; width: 2cm;" >19th century </a></li>
    <li><a href="catalog_photographs_20.php" style="margin-left:2cm; width: 2cm;"  >20th century </a></li>
    </ul>
  </li>

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

Tips for dynamically resetting the dataTable

When I create a datatable and add rows dynamically based on the selected option, I encounter an issue where I need to reinitialize the dataTable every time the option is changed. To address this, I have placed the reinitialization code inside the $("#selec ...

Navigating through different components within a single page

Each segment of my webpage is a distinct component, arranged consecutively while scrolling e.g.: <sectionA></sectionA> <sectionB></sectionB> <sectionC></sectionC> All the examples I've come across involve creating ...

Remove user from firebase with Admin SDK

I need help understanding how to remove a user from my admin panel using the Firebase Admin SDK. When attempting to delete a user, I encountered this error: Uncaught (in promise) ReferenceError: uid is not defined at eval (ManageCustomer. ...

Generate a Bootstrap dropdown button using JavaScript

Can you assist me in generating an HTML button using JavaScript with Bootstrap styling and customization? I have successfully created a Bootstrap button: <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id ...

Exploring a descendant element using webdriver

Here is the HTML code snippet: <pre> <span class="cm-string">"userId"</span> ":" <span class="cm-string">"abc"</span> "," </pre> <pre> <span class="cm-string">"password"</span> ":" <span cla ...

Combining Arrays in Javascript With Sorted Elements

Currently, I am practicing JavaScript concepts by working on various LeetCode problems that I don't normally encounter in my daily work routine. While starting with the easy section, I encountered an issue with merging arrays. I realized that I rarel ...

How can I align Ion-Content to the bottom of the page in Ionic?

I'm having trouble positioning a message input box at the bottom of my page. I've experimented with using align-self-end and creating a css class for ion-footer, but nothing seems to be working. <ion-content> <ion-footer align-self-end&g ...

User missing in the transition from POST to GET

My journey with Node has just begun, and I decided to delve into the Rocket Rides demo available on GitHub. While exploring the pilot sign-up feature on the web app, I encountered a roadblock when trying to implement a similar functionality for passenger s ...

Sending an Ajax request using jQuery to a Jenkins job

var milestone_name = uiscripts.context.milestone.name; //AJAX block start $.ajax({ url: "https://ctu-automation-server:8080/job/Check/build", type: "GET" }); //AJAX block end When the above ajax call is made from a remote serv ...

Retrieve information from an HTML table on a website and transfer it to a spreadsheet in Excel

I'm looking for assistance with extracting data from a website using VBA. I have an Excel table with ETF tickers, links, and prices, and I'm attempting to retrieve the previous day's closing price from each link using VBA. The challenge I&ap ...

Refreshing a div using Jquery and Ajax

Is it feasible to refresh a specific div using Jquery / Ajax without loading a php file within the Jquery script? I have come across several jquery scripts that necessitate loading a file, which is not ideal as it causes unset variables. <div id="relo ...

What benefits does the functional syntax of setState offer when used in React functional components?

Let's discuss functional components with the useState hook. For example: const [age, setAge] = useState(0) Now, when updating the age, we may need to use its previous value. This is where FUNCTIONAL UPDATES come in handy. You can pass a function th ...

Inquiries regarding node.js

While delving into research on node.js and Mongodb, I encountered a few areas that require clarification. My aim is to query Mongodb from the web using JavaScript because of my familiarity with the language. Additionally, it aligns well with Mongodb' ...

Using async/await keywords in React Native while iterating through an array and calling an API does not result in successful resolution

When attempting to request data from my API in this manner: export default ({ navigation }) => { // Call getMovieImages with the id of the likedMovies from the state.likedMovies const { getMovieImages, state:{ likedMovies }} = useContext(MovieContext); ...

Exploring SQL Components with JavaScript

Here is the code I am currently using: //This function handles all games and their attributes function handleGames(){ sql.query('SELECT id FROM games', function (err, rows){ if(err){ console.log(String(err).error.bgWhite) ...

Steps to add a label below a text input field

Within a form, I have two text boxes and I would like to add labels underneath each of them for better clarification. To illustrate my idea, here is a simple diagram: (input1)<--space-->(input2) <label1><--space--><label2> Is ther ...

Injected code from a self-built extension may not be applied by Google Chrome on certain websites until the scroll wheel is turned

I have developed two unique Chrome extensions designed to enhance web pages with CSS and SVG filters. Here are the links to the source code: CB Enhancer (adjusts colors for color-blind users) https://drive.google.com/open?id=1hvJIn3kPAMjaIWrAiUtIEVkEesQ1c ...

Currently focused on developing vertical sliders that can be manipulated by dragging them up or down independently

https://i.stack.imgur.com/NgOKs.jpg# I am currently working on vertical sliders that require dragging up and down individually. However, when I pull on the first slider, all sliders move together. The resetAllSliders button should also work independently, ...

The error message received is: "mongoose TypeError: Schema is not defined as

Encountering a curious issue here. I have multiple mongoose models, and oddly enough, only one of them is throwing this error: TypeError: Schema is not a constructor This situation strikes me as quite odd because all my other schemas are functioning prop ...

Adjusting the size of the parent element for a ThreeJS renderer

Is there a way to display a fixed 550 x 500 container inside a table for a 3D object without changing the parent container's size when calling container.appendChild(renderer.domElement);? Any suggestions on how to resolve this issue? HTML: <t ...