Animate the service item with jQuery using slide toggle effect

Currently, I am working on a jQuery slide toggle functionality that involves clicking an item in one ul to toggle down the corresponding item in another ul. However, I am encountering difficulties in linking the click event to the correct id and toggling the appropriate ul item.

Below is my jQuery code snippet:

$(document).ready(function() {

// When a subservices list item is clicked, toggle down the corresponding subservices item

$(".subServices").find("li").hide().end() // Hide all other ULs
.click(function(e) {
    if (this == e.target) {  // Check if the handler element is where the event originated
        $(this).children('ul.subServicesList.subServiceItem').slideToggle('fast');
    }
});
});

If anyone could provide assistance with this issue, it would be greatly appreciated :)

Link to Fiddle here

Answer №1

To ensure uniqueness, it is crucial that the ID of an element is distinct. Therefore, using the same ID for both subServices and SubServicesList is not advisable. In the solution presented below, a data-target attribute is employed for subServices.

Furthermore, it is essential to attach the handler to the .SubServicesList a element rather than just the SubServicesList.

$(document).ready(function() {

  // When a subservices list item is clicked, toggle down the corresponding subservices item

  $(".subServices > li").hide().end() // Hide all other ULs
  $('.SubServicesList a').click(function(e) {
    $('#' + $(this).data('target')).slideToggle()
  });
});
.SubServicesList {
  display: block;
  width: 55%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.SubServicesList li {
  display: inline;
  list-style: none;
  list-style-type: none;
  margin-right: 10px;
  text-align: center;
  line-height: 26px;
  cursor: pointer;
}
.SubServicesList li a:hover {
  color: #333333;
}
.subServices {
  width: 75%;
  margin: 0 auto;
}
.subServices li.subServiceItem {
  display: block;
  list-style: none;
  list-style-type: none;
  height: auto;
  clear: both;
}
.subServices li.subServiceItem .image {
  float: left;
  display: block;
  margin-right: 10px;
  margin-bottom: 10px;
}
.subServices li.subServiceItem .image {
  float: left;
  display: block;
}
/*.subServices li.subServiceItem { display:none; } */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="SubServicesList">
  <li><a data-target="1">Name 1</a></li>
  <li><a data-target="2">Name 2</a></li>
  <li><a data-target="3">Name 3</a></li>
</ul>

<ul class="subServices">
  <li class="subServiceItem" id="1">
    1 hwiufhwriufhiurhfiureh
  </li>
  <li class="subServiceItem" id="2">
    2 hwiufhwriufhiurhfiureh
  </li>
  <li class="subServiceItem" id="3">
    3 hwiufhwriufhiurhfiureh
  </li>
</ul>

Answer №2

This is the method I used

$(".ServicesList > li > a").on('click', function () {
    $(".Services>li").hide();
    $(".Services").find("li[id='" + $(this).attr('id') + "']").slideToggle(true);
});

Check out this JSFiddle

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 are the steps to implement localStorage in Vuejs3?

I'm feeling a bit lost when it comes to localStorage and its usage. I have a component called Statistic.vue which displays a modal at the end. Statistic.vue <template> <p class='modal'>{{numberOfGames}}</p> </template& ...

The shading of the box isn't displaying the correct color in Microsoft Edge and IE 11

I have a unique pattern consisting mainly of white and grey hues. To add a touch of color, I am using the box shadow property in CSS to apply a blue filter effect. This technique successfully displays the desired result in Firefox and Chrome browsers. Howe ...

What is the process for modifying two IDs simultaneously?

I'm struggling to include more than one ID in my CSS. I want the box border to have four different hover effects and three gradient buttons (e.g., play, pictures, etc.). Here is my HTML: <h2><a id="hover-1" href="">Hov ...

Correcting W3C validation issues is essential

I am encountering errors in my W3C validation process. Even though I have set <!DOCTYPE HTML> for my page, I continue to experience issues as shown in the image below. I have been trying to troubleshoot and resolve these errors without much success ...

Sending data from configuration to factory in AngularJS and UI Router

Trying to perform a search in an http call with a dynamic value based on the current view. The factory setup is as follows: .factory('SearchService', ['$http','$filter', function($http, $filter) { var service = { get ...

Load texture using ImageUtils with callback in Canvas Renderer

Currently, I am utilizing three.js revision 53. While attempting to load a texture in Canvas Renderer (specifically on Win7) and incorporating a callback for the onLoad event, the texture fails to display. Surprisingly enough, removing the callback functi ...

"Troubleshooting the failure of the alert function to work properly when loading content

I am working on a webpage named index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Co ...

Customizing jquery mobile styling

I am dealing with a table where the challenge lies in aligning the text to center in the header. .info-header { font-size: small; text-align: center; } Despite setting the alignment, the row still inherits left alignment from jQuery mobile. Seeking ...

Making a request using AJAX to retrieve data from an API

Looking to create an API GET request using ajax? Want a jquery function that takes an api key from the first input field and displays a concatenated result on the second input field (#2)? The goal is to make the get request to the value shown in the 2nd ...

Dealing with a checkbox click event in Vuejs when there is no parent element involvement

In the table below, you can see checkboxes displayed as images: example image of a table with checkboxes Here is an example code snippet: <tbody> <tr @click="goDetail"> <th scope="row><input type="checkbox" /></th> <t ...

Is it the same item in one situation, but a completely different item in another?

I am currently investigating the behavior of objects in JavaScript, particularly when it comes to copying one object onto another. It seems that sometimes they behave as if they are the same object, where modifying one also modifies the other. Many resourc ...

Testing with karma/jasmine in AngularJS can lead to issues when there are conflicts between test

Currently experiencing challenges while running my midway tests (or integration tests, which are halfway between unit tests and E2E tests). Working with an AngularJS build featuring RequireJS, I am utilizing the RequireJS plugin in Karma to run the tests. ...

What could be causing the issue with the .toLocaleTimeString method not properly converting time zones?

I have been attempting to convert timezones based on the current time, but I haven't had success. I tried switching from using date.toLocaleTimeString to date.toLocaleString, but it didn't work. I also tried changing the timezone from America/Den ...

Proceed with the next AJAX request only when the previous one has successfully completed

Currently, I am working on a process where PDFs are generated in the background using AJAX calls. The generation of these PDF files usually takes around one second each. Although the process is functional, I have encountered an issue with memory depletion ...

Mastering the Art of Tab Selection with Jquery

I am trying to implement a tabs control using jQuery. Here is the HTML code I have: <div id="tabs" class="news1"> <ul> <li><a href="#tabs-1">Track</a></li> <li><a href="#tabs-2">History&l ...

Looking for a smart way to extract all the selected elements from a form?

I am attempting to retrieve all the checked items from this form using JavaScript. I have looked at previous solutions, but none of them fit my requirements. <form id="checkform" class="container" style="margin-top:20px;"> <input type="checkb ...

The tooltip in chart.js stubbornly holds onto past data even after it's been

Utilizing chart.js, I have implemented a feature where a tooltip displays when a user hovers over the chart successfully. However, I encountered an issue. I added an option for users to un-check data-points, which works correctly. But now, the tooltip fun ...

Experiencing the 'invalid_form_data' error while attempting to upload a file to the Slack API via the files.upload method in Angular 8

I am currently working on a project that involves collecting form data, including a file upload. I am trying to implement a feature where the uploaded file is automatically sent to a Slack channel upon submission of the form. Despite following the guidance ...

Running a designated AJAX function from a variable by utilizing Applescript

Struggling to execute a JavaScript code within a page using Applescript. In the JavaScript, an AJAX function was defined like so: var myFunction = function () { // Here be the code... } I attempted this in Applescript: do JavaScript "document.myFunct ...

When receiving JSON and attempting to store the data in a variable, I encounter an issue where it returns the error message "undefined is not iterable (cannot read property Symbol

I'm currently integrating the Advice Slip API into my project. I am experiencing an issue when trying to store the JSON data in a variable like so: let advice; fetch("https://api.adviceslip.com/advice").then(response => response.json()). ...