I must update the menu to show only one sub-menu at a time, ensuring that multiple menus cannot be displayed simultaneously

When I click on a menu option, it displays correctly, but when I click on another option, both are displayed. The goal is to only display one at a time.

https://i.sstatic.net/J6vLf.png

$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
    $(this).parent(".sub-menu").children("ul").slideToggle("200");
    $(this).find("i.fa").toggleClass("fa-angle-up fa-angle-down");
});

I have the above jQuery code and I need to modify it so that only one option can be displayed instead of two.

<nav class='animated flipInX'>
  <ul>
    <li>
      <a href='#'>
        <div class='fa fa-home'></div>
      </a>
    </li>
    <li>
      <a href='#'>
        About
      </a>
    </li>
    <li class='sub-menu'>
      <a href='#'>
        Products
        <i class='fa fa-angle-down'></i>
      </a>
      <ul>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
      </ul>
    </li>
    <li class='sub-menu'>
      <a href='#'>
        Services
        <i class='fa fa-angle-down'></i>
      </a>
      <ul>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
      </ul>
    </li>
    <li>
      <a href='#'>
        Contact Us
      </a>
    </li>
  </ul>
</nav>

Please help me fix this issue with the HTML code :(

javascripthtmljquerycssfrontend

Answer №1

$(".sub-menu ul").hide()
$(".sub-menu a").click(function () {
  $(".sub-menu ul").not($(this)).hide();
  $(this).parent(".sub-menu").children("ul").slideToggle("200");
  $(this).find("i.fa").toggleClass("fa-angle-up fa-angle-down");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class='animated flipInX'>
  <ul>
    <li>
      <a href='#'>
        <div class='fa fa-home'></div>
      </a>
    </li>
    <li>
      <a href='#'>
        About
      </a>
    </li>
    <li class='sub-menu'>
      <a href='#'>
        Products
        <i class='fa fa-angle-down'></i>
      </a>
      <ul>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
      </ul>
    </li>
    <li class='sub-menu'>
      <a href='#'>
        Services
        <i class='fa fa-angle-down'></i>
      </a>
      <ul>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
        <li>
          <a href='#'>
            Product Item
          </a>
        </li>
      </ul>
    </li>
    <li>
      <a href='#'>
        Contact Us
      </a>
    </li>
  </ul>
</nav>

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

Error message encountered in node-schedule: Unable to read undefined property upon job restart

Using node-schedule, I have successfully scheduled jobs on my node server by pushing them into an array like this: jobs.push(schedule.scheduleJob(date, () => end_auction(req.body.item.url))); Everything is working as expected. When the designated date ...

javascriptnode.jscronnode-schedule

Retrieving selected option value in React

I am currently using Material UI for my React application and I am encountering an issue with getting the value of a select form. Initially, I had success with the following code snippet: <select name="role" value={props.role} onChange={props.handleIn ...

htmlreactjsmaterial-ui

Tips for structuring JSON data to retrieve numerous values

Creating a tool where users can enter their postcode to check for nearby windfarms is my current project. I have organized the data by named locations, and it's important to maintain that structure due to the specific API mapping tool I am using. Here ...

javascriptjson

How can I retrieve the Sequelize results in the form of a 2D array rather than an array of objects?

I have a situation where I am using the Sequelize query() method like this: const sequelize = new Sequelize(...); ... // IMPORTANT: Cannot modify this query const queryFromUser = "SELECT table1.colname, table2.colname FROM table1 JOIN table2 ON/*...*/ ...

javascriptsqlnode.jssequelize.js

What is the integration process of using Font Awesome with React?

After installing react-create-app using npm, I also added react-fontawesome. Now, I'm wondering how to include the css styles of fontawesome in my project? Here is a glimpse of my work space: https://i.stack.imgur.com/pM1g1.png ...

javascriptreactjsnpmfont-awesomejsx

Trouble displaying CSS content image in Internet Explorer

Usually, I use Chrome as my default browser. However, I recently decided to test whether my website functions properly on other browsers as well. In Chrome, the header displays my logo with great quality using content:url. But when I tried accessing my w ...

cssinternet-explorergoogle-chrome

Steps for configuring mode as 'open' when generating a shadow element with vue-custom-element

Here is the method I used to generate a shadow component Vue.customElement('my-element', MyElement, { shadow: true, shadowCss: mystyles, }); ...

javascriptvue.jsvue-componentshadow-dom

Encountering an Angular 12 error 401 upon refreshing the page

Currently, I am working on a login form using angular 12 with Spring Boot that includes basic authentication spring security. When a user successfully logs in, they are directed to the main page which offers CRUD actions as depicted in the images linked be ...

angularfrontend

Hide the scroll bar in html/css while keeping the functionality of the arrows intact

Is there a way to remove the scroll bar but still be able to access overflown data using arrows? Any assistance would be greatly appreciated. Thank you in advance. ...

javascriptjqueryhtmlcss

Encountering errors when trying to render views in Node/Express is a common

I have set up my nodejs/express application like this; app.set('views', __dirname + './views'); app.set('view engine', 'ejs'); After that, I created a route as shown below app.get('/page/MyPage', functio ...

javascriptnode.jsexpress

Showing items in a VueJS component and transferring them to the component

Utilizing VueJS 2.0 and vue-router 2, my goal is to display a template based on route parameters. I have a view called WidgetView where components are dynamically changed. Initially, WidgetComponent is shown which displays a list of widgets. When a user se ...

javascriptvue.jsvuejs2vue-router

Experiencing issues with archiving files in PHP and receiving a 'zipArchive::close() Read Error: no such file or directory in c:/' error message?

When using PHP to download multiple files as a zip folder, the code below is giving me an error message: "zipArchive::close() Read error: no such file or directory in C:// path" I have added an HTML button that, when clicked, retrieves the id of the row t ...

phphtmlfiledownloadphp-ziparchive

firefox is experiencing lag issues with react-spring and framer-motion

Encountering an issue with two animation libraries, react-spring and framer-motion. Attempting to create a basic animation that triggers upon the component's initial visibility (simplified version). <motion.div initial={{x: -25, opacity: 0}} anima ...

cssreactjsanimationreact-springframer-motion

Default page featuring an AngularJS modal dialog displayed

I am attempting to display a modal popup dialog using an HTML template. However, instead of appearing as a popup dialog, the HTML code is being inserted into the default HTML page. I have included the controller used below. app.controller('sortFiles&a ...

javascriptangularjs

Avoid using references when removing elements from an array in JavaScript

For a straightforward logging system, I've devised a method of storing arrays as log entries within a single array. Here's how the code functions: var myarr = new Array(); var secondarr = new Array(4,5,6); myarr.push(secondarr); secondarr.length ...

javascriptarraysreference

Retrieving the present precipitation amount from a Java Script API

I'm having some issues with extracting information from this list because I don't have much experience with JavaScript and APIs. The API I'm working with provides data for the current hour, but I'm struggling to retrieve that specific v ...

javascriptarraysapivue.jsnpm

I would like to modify the text color of a disabled input field

I need to adjust the font color of V1, which is a disabled input field. I want to make it darker specifically for Chrome. Any suggestions on how I can achieve this? Here's my HTML code: <mat-form-field appearance="outline" fxFlex=" ...

javascripthtmlcssangulartypescript

Utilizing One-to-Many Microphone Streaming Technology

I'm looking to create a unique one-to-many microphone streaming system where a user can record from their microphone and others can listen in. I also need to be able to record the microphone session. Would it be better to use WebRTC for client commun ...

javascriptjavanode.jswebrtclive-streaming

Encountering issues with the Sequelize Model.prototype.(customFunction) feature malfunctioning

While attempting to define a customFunction within the Sequelize model, I encountered an error: TypeError: user.getJWT is not a function at User.create.then (/projects/test/a/app/controllers/UserController.js:22:29) Below is the code snippet from ...

javascriptnode.jsexpresssequelize.js

An ultimate guide to mapping a nested array in React.js

Problem: I am struggling to display the entire content of my array. The goal is to render all elements in the array, but so far I can only get one to show up. I have found that including [key] in the object fields is the only way to generate any output. ...

javascriptarraysreactjs