Switching classes in real time with JavaScript

I'm struggling to understand how to toggle a class based on the anchor text that is clicked.

<div>
<a id="Menu1" href="#">Menu</a>
<div id="subMenu1" class="subLevel">
<p>stuff</p>
</div>

<div>
<a id="Menu2" href="#">Menu</a>
<div id="subMenu2" class="subLevel">
<p>stuff</p>
</div>

<div>
<a id="Menu3" href="#">Menu</a>
<div id="subMenu3" class="subLevel">
<p>stuff</p>
</div>

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

         $("#Menu" + [i]).on('click', function (e) {
             e.preventDefault();
             $("#subMenu" + [i]).toggleClass('dropDownShow');
         });
     });
</script>

Struggling to pinpoint where the value of 'i' changes from 1 to 3 depending on which anchor link is clicked

javascriptjqueryhtmlcss

Answer №1

Here's a simple example:

<div>
    <a id="Link1" class="link" href="#">Example</a>
    <div id="subLink1" class="subContent">
    <p>content here</p>
    </div>

    <div>
    <a id="Link2" class="link" href="#">Example</a>
    <div id="subLink2" class="subContent">
    <p>content here</p>
    </div>

    <div>
    <a id="Link3" class="link" href="#">Example</a>
    <div id="subLink3" class="subContent">
    <p>content here</p>
    </div>

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

                 $(".link").on('click', function (e) {
                     e.preventDefault();
                     $(this).next().toggleClass('showContent');
                 });
             });


        </script>

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

Encountering a bug in my JSON or object tree viewer in Vue.js 3 where duplicate keys are present when there are multiple similar values

Encountering an issue with the following code: Attempting to create a tree viewer from an object, it works well until encountering identical values which cause key duplication and replacement. View on CodePen: https://codepen.io/onigetoc/pen/rNPeQag?edito ...

javascriptvue.jstreevuejs3treeview

Error: Unable to retrieve current location using 'Geolocation' in React

import "./App.css"; import { useState, useEffect } from "react"; function App() { const [lat, setLat] = useState(null); const [long, setLong] = useState(null); const [data, setData] = useState(null); const [error, setError] = u ...

javascripthtmlreactjsnpmopenweathermap

What steps can be taken to implement a code generation feature on our website?

I need to provide the HTML code of my order form to third parties. After they register and pay, they should be able to copy and paste the HTML code from my site onto their own site. The date will then be saved on my site with a reference to the reseller. ...

phphtmlphp-5.3

Dealing with uncaught promise rejection while using the 'opn' npm package in Docker

UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Exited with code 3 I encountered this error while trying to open links using a module within a Docker container. The code functioned fine on my local machine without D ...

javascriptnode.jsdockernpmpromise

What is the process for implementing filtered HTML attributes in a directive?

I’ve created a custom directive that generates a popup menu by extracting data from HTML content. The purpose is to transform a group of Bootstrap carousel-compatible elements into a structured list. However, each .item element contains an attribute with ...

jqueryhtmlangularjstwitter-bootstrapangularjs-directive

What is the best way to create a sliding motion to the right for a menu item, accompanied by a line when it

Is there a way to align the line to the right of the text when it's not selected, and have a new line appear on the left side that pushes the text and removes the line on the right side? Here is the design I'm trying to emulate. If you click t ...

htmlcss

Struggling to eliminate the scrollbar on a Material UI Dialog

I have a modal window that includes a keyboard, but I'm encountering some issues. Despite adding overflow:'hidden' as inline CSS, the scrollbar refuses to disappear. Furthermore, even when utilizing container-full padding-0 in Bootstrap, th ...

javascriptcssreactjsmaterial-ui

Load the page before the images are displayed

Currently, I am utilzing Ruby threads with PhantomJS to convert multiple URLs into images. The issue is that the page only loads once all of the images have been generated. My goal is to implement a loading animation while the images are being created an ...

ruby-on-railsrubyajaxjqueryloading

Angular: Unable to access values of non-existent data (reading '0')

I'm encountering an error when trying to import an excel file using the following code Angular Ag Grid Excel Import Cannot read properties of undefined (reading '0') I'm attempting to import a file named Book.csv, and wondering if thi ...

javascriptangulartypescript

Change the size of window using jQuery

I have implemented a tooltip that can appear in two positions: top and bottom. I am trying to achieve this using jQuery resize function. The issue I am facing is that when the user resizes their browser window to less than 768px, the tooltip should appea ...

javascriptjqueryresize

Unable to utilize material tabs in this situation

Discovering the material tabs feature at https://material.angular.io/components/tabs/api#MatTab got me excited to implement it in my project. After adding the suggested import, I encountered an issue where I couldn't find the module "@angular/materia ...

javascriptangulartypescriptangular-material

Converting a string value into an object in Javascript using a command that functions similarly to eval in Python

When working with Python, the stringValue variable is often assigned as a string: stringValue = '{"DATA":{"VERSION":1.1, "STATE":True, "STATUS":"ONLINE"}}' To convert this string into a Python di ...

javascriptpythonnode.jstypescript

What is the process for retrieving the value of the 2nd td by clicking on the checkbox in the 1st td with JavaScript

When I click on "in", I am looking to retrieve the value of "out". This can be easily understood by referring to the image below: The timesheet displayed is generated using an array. All the data is stored in the array and needs to be presented in a table ...

javascriptphpjqueryhtml

Having trouble getting a constructor to function properly when passing a parameter in

Here's the code snippet I'm working with: import {Component, OnInit} from '@angular/core'; import {FirebaseListObservable, FirebaseObjectObservable, AngularFireDatabase} from 'angularfire2/database-deprecated'; import {Item} ...

javascriptangulartypescriptfirebaseangular5

Empty results received from MongoDB queries executed within an asynchronous loop

I'm encountering an issue where I have a list of IDs that I need to query Mongo with in a for loop, but it always returns an empty []. Initially, the queries were returning promises, so I switched from using forEach to a standard for loop as shown her ...

javascriptmongodbexpressnpm

Styling two divs with borders

Hello everyone, I could really use some assistance with merging the borders of two <div>s. Here's what I'm trying to achieve compared to where I currently stand: view image here and this is my desired outcome view image here Would anyone b ...

htmlcss

Only apply the CSS filter alpha to the parent element and not its children

I am working on implementing an alert message box using HTML and CSS. Below is the code I have so far: <div class="dim" id="msg"> <div class="dialog_wrapper"> <div class="dialog" id="msg_value"></div> ...

cssfilteralpha

Attempting to navigate the world of AJAX and PHP

My experience with AJAX is limited, but I am currently working on a project that requires a form to submit data without refreshing the page. The goal is to display the result in a modal window instead. To achieve this functionality, I understand that imple ...

javascriptphphtmlajax

Encountering a red squiggly line while working on an Angular 2 project in an HTML file within Visual Studio

Whenever I incorporate Angular 2 code into my HTML files, I notice red squiggly lines appearing like this: Hovering over the red squiggly lines does not reveal any errors or warnings. It may be worth mentioning that I am currently utilizing ReSharper Ult ...

htmlvisual-studio-2015angularresharper

Attach a click event to choose an option in the dropdown

I'm facing an issue trying to get a click event working on an HTML option element. Even something as simple as console.log('hello!'); doesn't seem to be functioning. This is the code I've been using: $('#mySelect option&apo ...

jquery