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

Different option for animated side slider based on location

Whenever I click on this div, it slides out smoothly. Check out these images to get a visual of what I am aiming for: This is how the Div looks when collapsed by default https://i.stack.imgur.com/zJIsA.png Once slid out, the Div looks like this (highlig ...

The type '{}' cannot be assigned to type 'IntrinsicAttributes & FieldsProp'. This error message is unclear and difficult to understand

"The error message "Type '{}' is not assignable to type 'IntrinsicAttributes & FieldsProp'.ts(2322)" is difficult to understand. When I encountered this typeerror" import { useState } from "react"; import { Card } fr ...

Tips for establishing a fixed point at which divs cease to shrink as the browser size decreases

There are numerous dynamically designed websites where divs or images shrink as the browser size decreases. A great example of this is http://en.wikipedia.org/wiki/Main_Page The div containing the text shrinks proportionally to the browser size until it ...

Determine whether a request is for CSS or JavaScript when using NodeJS and Express

My routing configuration includes the following setup: app.get('*', function (req, res, next) { req.xhr ? next() : res.render('layout/layout'); }); The idea behind this is to return the base layout if the request is not an XMLHttp ...

Detecting a mobile device when using NextJS can be accomplished by using user

With so many topics and questions on Stack Overflow, I am struggling to find the most efficient solution for detecting mobile devices. I have two components - one designed solely for desktops and another for mobile devices. {isMobile? (<SecondComponen ...

The function will still be executed even if the assigned ID is not found within the document

I was working with the following javascript code: $(document).ready(function () { ... $("#mySelector").ready(function () { window.alert('What the heck!!!'); }); }); I expected a pop-up window to appear every time the mySel ...

Tips on uploading information from a PDF document onto a website

My goal is to develop a program or script that can extract data from PDF form fields and automatically input it into the corresponding textfields on my website, all done through the front end. The problem I'm facing is not knowing where to begin with ...

Is there a way to transfer the jQuery code I've developed on jsfiddle to my website?

I am currently developing a website for fun, using HTML and CSS. While I have some familiarity with these languages, I have never worked with jQuery before. However, for one specific page on the site, I wanted to incorporate "linked sliders," which I disco ...

Can you explain the functionality of the Matrix4.multiply() method in three.js?

I am currently delving into the world of three.js and finding myself faced with a challenge. My goal is to multiply two translation matrices together in order to create a consolidated matrix that encapsulates both translations: | 1 0 0 -2 | | 1 0 0 3 | ...

Leverage the power of option values to make dynamic text edits with jQuery

I've been struggling to update the text in an option without success, here's my code: View <select id="plano"> <option selected>Choose plan...</option> @foreach($foodplans ...

What sets apart using 'self.fn.apply(self, message)' from 'self.fn(message)', and what are the advantages of using the former method?

Whenever I come across code that looks like thisnewPromise.promiseDispatch.apply(newPromise, message), I can't help but wonder why they didn't simply use newPromise.promiseDispathch(message) ...

Utilize the "rel" attribute within the text currently being shown through Colorbox

Can the rel text be utilized in the current text shown by Colorbox? I have a collection of images categorized with rel="Project Name" <a href="gallery/IN01 _GSM1 450x582.jpg" rel="Project Name" title="Global Supplier Management brochure Cover" name ...

How to use Selenium in Python to target specific sub-elements

I am currently working with the following HTML code block: <tbody id="id_tbody"> <tr id="tr_project_0" class="project_tr clr01 hover" data-select-value="0" style="border-top: 1px dotted #B4B4B4;"> <td class="txtC"> <a href="/173537" ...

Looking to style a <p> element with CSS?

In the div class index, there are two additional divs without any class or id names, along with two <p> tags. My goal is to style these two <p> tags. <div class="doubt"> <div> <p>Hello world</p> <div> ...

Although it may not be a constructor, the types certainly align perfectly

Although this question has been asked countless times before, none of these solutions seem to work in my case. Whenever I try to call the Config constructor, I encounter a TypeError: Config is not a constructor. Despite researching on Stack Overflow and M ...

Display the page for 10 seconds continuously in a loop

I am currently developing a Node JS guessing game where data is collected on the back-end and sent to the front-end to start the game. The data consists of 10 levels, allowing the game to operate on a single page. Each level lasts for 10 seconds. Once the ...

Encountering problem with image file encoding while using res.download in Express.js

My node.js server with expressjs is set up for local development, where I store and retrieve various files through basic HTTP calls. Most of the time, everything works smoothly. However, on rare occasions, a small number of files return to the end-user sig ...

Steps to eliminate a list-divider in jQuery Mobile when removing the list item

I need help with a situation involving groups of list items (li). When I delete all the "li" in a group, I want to also remove the list-divider that separates them. For example, if there are 3 "li" after a list-divider, and I delete each "li" one by one, w ...

Is there a way to utilize and incorporate Functions from a separate file within an API Server file?

I have integrated ReactJS, Firebase, and React Redux into my project. https://github.com/oguzdelioglu/reactPress Currently, I am displaying data from Firestore by utilizing Functions in https://github.com/oguzdelioglu/reactPress/blob/master/src/services/ ...

Using a promise inside an Angular custom filter

I am attempting to implement a filter that will provide either a success or error response from the ret() function. The current code is returning {}, which I believe is its promise. .filter('postcode', ['$cordovaSQLite', '$q' ...