(jquery) Show or Hide One Dropdown Element Singularly

I'm currently working on creating a mobile side navbar that features dropdowns with additional links.

One issue I'm facing is trying to set it up so that when a link in the navigation is clicked, only the corresponding dropdown activates. At the moment, both the "About" and "Services" dropdowns activate simultaneously when either of their respective links is clicked.

I've attempted various methods using jQuery to achieve this functionality, but have been unsuccessful in getting it to work correctly.

$('.navbar-item-side').on('click', function() {
  $('.navbar-content-side').toggleClass('dropdown-show');
});
/* CSS code goes here */
<!-- HTML code goes here -->

jqueryhtmlcss

Answer №1

Try using the following code instead of 

$('.navbar-content-side').toggleClass('dropdown-show')
: 
$(this).find('.navbar-content-side').toggleClass('dropdown-show')

To hide other menus, simply add this code (

$('.navbar-content-side').removeClass('dropdown-show');
) before the toggleClass function

$('.navbar-item-side').on('click', function() {
  // If you want to hide other menu, uncomment the code below for a smooth effect
  // $('.navbar-content-side').removeClass('dropdown-show');
  $(this).find('.navbar-content-side').toggleClass('dropdown-show');
});
body {
    margin: 0;
    padding: 0;
    background: #20A288;
    overflow: hidden;
    box-sizing: border-box;
    font-family: sans-serif;
}
...
</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

What is the best way to customize the link style for individual data links within a Highcharts network graph?

I am currently working on creating a Network Graph that visualizes relationships between devices and individuals in an Internet of Things environment. The data for the graph is extracted from a database, including information about the sender and receiver ...

javascriptcsschartshighcharts

The PrimeNG Tree component offers a range of unique features

Encountering an issue with the PrimeNG tree in angular2 Let's take a look at the code snippet from product_tree.component.ts : constructor(private http: HttpClient, private productsService: ProductsService) { this.productsService.getProductsClasse ...

htmlangularprimeng

Change the appearance of text with a button click using JavaScript

Currently mastering JavaScript but encountering an issue. How do I change the text to underline when clicking on "Click Me"? <p id="demo" style=" text-decoration:none; ">Hello JavaScript!</p> <button type="button" onclick="document.getE ...

javascripthtmlcss

Drag and drop a Jquery image onto the div with its top left corner

Drop targets: <div id="targetContainer" style="width:100px; height:100px;> <div id="tar_0-0" class="target" style="position: relative; float:left; width:50px; height:50px; background-color: #fff;"></div> <div id="tar_1-0" class="t ...

javascriptjqueryhtmldrag-and-drop

The content momentarily flashes on the page during loading even though it is not visible, and unfortunately, the ng-cloak directive does not seem to function properly in Firefox

<div ng-show="IsExists" ng-cloak> <span>The value is present</span> </div> After that, I included the following lines in my app.css file However, the initial flickering of the ng-show block persists [ng\:cloak], [ng-cloak], ...

javascriptcssangularjshtmlangular-directive

Dynamic header showing various sections of the image depending on screen size

Looking to create a responsive header image for my website using the 'mobile first' approach. I have a specific picture in mind that I want to display differently depending on the device's screen size, all while using the same image file. Fo ...

htmlcsstwitter-bootstrapfrontendbootstrap-4

What could be causing the issue of CSS Styles not being applied to an Angular 2 component with Vaadin elements?

Currently, I am immersed in the tutorial on Vaadin elements using Angular 2 that I stumbled upon here In section 5.3, Styles are applied to the app.component.ts as shown below import { Component } from [email protected]/core'; @Component({ select ...

htmlcssangulartypescriptvaadin

Mastering the art of transitioning between DIV elements

I am looking to implement a rotating three-card display on click, and have come up with the following code: $('.box1').click(function(){ $('.box1').toggleClass('removeanimate'); $(this).toggleClass('go'); ...

javascripthtmljquerycss

When a button is clicked, load two separate pages into two distinct divs at the same time

$('#menuhome').click(function(){ $('#leftcolumncontainer').load('pages/homemenu.php'); }); the code above is used to load the home menu on the left side. Now, let's add the following: $('#menu ...

javascriptjqueryhtmlcss

Adjustable height for Divs placed between stationary Divs

As a beginner, I have a question that may seem simple to some. I want to create a layout with fixed divs at the top and bottom, but a flexible one in between. To help explain, I've created a sketch. If anyone could provide me with a starting point, I ...

htmlcssheightfixed

Decrease in internal width

Seeking assistance to adjust the internal border width for better text alignment. I've been struggling with this issue as a beginner in the web development field and would appreciate some guidance. Link to image Here is a snippet of my HTML code: & ...

htmlcss

Adapting a CSS design

Having some trouble with creating a CSS style. Here's what I have so far: http://jsfiddle.net/WhNRK/26/ Originally designed for a label, but now attempting to modify it for something like this: <input type='radio' name='mcq' ...

htmlcss

Instead of uploading multiple files at once, allow users to upload individual files by clicking on the table row

In my dynamic table, there are 4 columns. The first 3 columns in each row have an input type='file' where users can choose a file to upload, and the 4th column has a submit button aligned with the rows. While submitting files in the first row wor ...

javascriptphpjqueryajax

Change the appearance of the page when it is being displayed within an iframe using CSS

How can I display a webpage differently using CSS if it is within an iframe? I would like to use jQuery or JavaScript to switch to a different stylesheet specifically when the site is being displayed within an iframe. Any suggestions on how to achieve th ...

javascriptjqueryhtmlcssiframe

Implementing a time delay for submitting an ajax form

I am looking for a way to delay the submission of a form by 2 seconds. I have tried different solutions, but none seem to work for me. I attempted using setTimeout to set a delay, but it is not working as expected. Here is my script and the form tag - wh ...

jqueryajax

Center text vertically within a Bootstrap anchor element (button)

I am facing difficulty in vertically aligning text within a Bootstrap (3) <a> element while it works fine in a <button> Here is the HTML : <button class="btn">some text<span class="glyphicon glyphicon-play pull-right"></span> ...

csstwitter-bootstraptwitter-bootstrap-3

Fatal error in CodeIgniter occurring while invoking CSS less functions

Whenever I try to execute this function, I encounter the following error message: "Fatal error: Uncaught exception 'Exception' with message 'load error: failed to find test.less' in C:\xampp\htdocs\project\applic ...

phpcsscodeigniterless

When using onclick="location.href='page.html'", the page fails to load on Safari browser

I've been having trouble with getting onclick="location.href='link.html'" to work and load a new page in Safari (5.0.4). In my project, I am creating a drop-down navigation menu using the <select> and <option> HTML tags. I have ...

javascripthtmlsafarionclick

Unlock the secrets of calling a servlet while accessing a .jsp file

After creating a Slide Show using jQuery and connecting it to a database with servlet, I encountered an issue when trying to run the Slide Show by calling the servlet. Even after attempting to call the servlet from index.jsp using include, the SlideShow ...

jqueryajaxjspservlets

Attempting to modify header color in various website sections without success

I've been struggling to figure out this code: <script> window.onload = function() {myFunction()}; window.onscroll = function() {myFunction()}; function myFunction() { const top1 = document.getElementById("big-landing ...

htmljquerycssresponsive-design