Tips for effectively organizing a collapsible list

Here is a list that I have:

<ul>
    <li><span class="Collapsable">item 1</span>
    <ul>
        <li><span class="Collapsable">item 1.1</span></li>
    </ul>
</ul>

I am looking to create a collapsible list with children that slide up and down. I came across this code snippet which provides a similar result. However, I want to add a slide effect to it. When I try adding a duration to the effect, it works fine for the children but the parent list also gets affected by the slide effect.

How can I solve this issue?

javascriptjquery

Answer №1

give this a shot

http://jsfiddle.net/5Q8rJ/202/

$(".Collapsable").click(function () {
    if($(this).hasClass('Collapsed')){
        $(this).parent().find('> ul').slideUp();
        $(this).removeClass("Collapsed");
    }else{
        $(this).parent().find('> ul').slideDown();
        $(this).addClass("Collapsed");
    }
});

$(".Collapsable").each(function(){
        $(this).parent().find('ul').hide();
});

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

Fetching data from a Django view using a JavaScript AJAX POST call

Utilizing Javascript for an asynchronous request to a Django View, I am able to successfully receive data from the POST request. However, I am encountering issues with returning a confirmation message that the process was successful. Despite expecting xhtt ...

javascriptpythondjangoajaxhttpresponse

Ensuring a consistently positioned footer at the bottom

I understand that this might not seem like a significant issue, but I'm encountering some difficulties. In my main.html file, there are three divs. The first div contains the navigation bar, the second div is an "empty" div that uses JQuery/Javascript ...

javascriptjqueryhtmlcss

What is the best way to position a tooltip near an element for optimal visibility?

One div is located on the page as follows: <div id="tip"> Text for tip goes here... </div> And another one can be found below: <div class="element"> Text for element goes here... </div> There is also a piece of JavaScript ...

javascriptjqueryhtmlcsshover

Make sure to prevent losing the global status in Vuex and VueRouter when the page is refreshed

As I develop a Single Page Application (SPA), I am utilizing Vuex to manage session states on the client side. However, I have noticed that the state resets whenever the browser is manually refreshed. Is there a way to prevent this behavior without relying ...

javascriptvue.jsvue-routervuex

"Enhance Your WordPress Website with the Power of jQuery

I have been developing a unique Wordpress plugin that incorporates a grid loading effect using jQuery. The script I have implemented is as follows: <script type="text/javascript"> new GridScrollFx( document.getElementById( 'grid' ), { ...

javascriptphpjquerywordpress

How to Retrieve the Parent ID in jQuery Sortable?

I'm currently experimenting with the sortable feature and encountering a minor roadblock. My aim is to extract the ID of the new parent element for use in an ajax request. UPDATE: I've managed to log the parent element, but it's duplicatin ...

jqueryajaxjquery-ui-sortable

Submitting via AJAX upon submission

I've implemented the following code in my comment.php: <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script type="text/javascript"> $(function() { $('#reset_form').cl ...

phpjqueryajax

transform the usage of jquery.submit into ajax submit

I'm having trouble figuring out how to submit a form using Ajax from the jquery ui button function. This is my code for submitting the form in a traditional way $('#contact-form').dialog({ modal: true, autoO ...

jqueryasp.net-mvcajax

retrieving multiple values in ajax call and processing them in controller function

I'm facing a challenge in Laravel when it comes to sending multiple input options (generated by a foreach loop) through an ajax call. The goal is to send multiple values and loop through them in the ajax call to effectively pass them to the controller ...

javascriptphpajaxlaravel

Restricting the number of checkboxes using jQuery depending on which radio buttons are selected

Having an issue with checkboxes on a webform. The user must choose options for a purchase by selecting checkboxes and radio buttons. There are 2 radio buttons, numbered 1 and 2, representing the quantity of the product to be purchased. Following those are ...

jquerycheckboxradio-button

I am facing an issue with uploading files to my designated directory through Node.js Multer

After creating a web service using node js and implementing a form with React interface that includes user information and file upload, I encountered an issue while attempting to save the file to the specified directory on the node js server using multer. ...

javascriptnode.jsjsonreactjsmongodb

jQuery UI - Reordering while sorting event is in progress

I am looking to assign the value of a list element to the index of its position after sorting. This assigned value should automatically update as the sorting changes. <script type="text/javascript"> $(function() { $(&apo ...

jqueryjquery-uijquery-ui-sortable

Steps for eliminating the chat value from an array tab in React

tabs: [ '/home', '/about', '/chat' ]; <ResponsiveNav ppearance="subtle" justified removable moreText={<Icon icon="more" />} moreProps={{ noCar ...

javascriptreactjstypescriptnext.jsrsuite

Using AngularJS to Nest ng-view within ng-repeat

I have a collection of items. Each item has buttons to display its details and comments within this ng-view section. It is necessary for the user to view all available product details on one page, for example. Below is the HTML list: <div ng-controll ...

javascriptangularjsangularjs-ng-repeatangularjs-routing

When using jQuery, the script will execute successfully only when running it chunk by chunk in the console, rather than running the

As I tidy up an html page, my main task is to remove anchor tags and keep the text nodes. To achieve this, I am enclosing all text nodes (without any surrounding elements) within the <asdf> tag. Additionally, I am deleting empty elements such as < ...

javascriptjquery

What is the best way to create a CSS class for a list element in React?

I am facing an issue with styling buttons in my UI. These buttons represent different domains and are dynamically generated based on data fetched from the server using the componentDidMount() method. Since I do not know the quantity of buttons at the time ...

javascriptcssreactjsstate

Using ajax to send an array to PHP

I have an array named "heart" that is being sent via ajax... var heart = [31,32,33,34,35,36,37,38,39,42,43]; // Sending this data via ajax to php file/ $.ajax({ type: "POST", data:{ 'system': heart }, url: "login-function.php", success: f ...

javascriptphpjqueryajax

Transferring a multidimensional array from a controller in CodeIgniter to DataTables using jQuery

Is there a way to pass a multi-dimensional array from the controller into dataTables? While using CodeIgniter and jQuery dataTables, I encountered no issues when working with just a single array. However, when attempting to use a 2D array, the data does n ...

phpjqueryajaxcodeigniterdatatables

Tips for avoiding the automatic transition to the next slide in SwiperJS

How can I prevent the next button click in swiper based on my custom logic? I am using the swiperjs library within a Vue project and I need to stop users from swiping or clicking the next button to move to the next slide depending on certain conditions de ...

javascriptvue.jsswiper.js

Using an array to dynamically input latitude and longitude into a weather API call in PHP

I am currently working on a leaflet map project that showcases the top 10 cities in a selected country. The markers are added dynamically based on the coordinates provided in the $latLng array. For example, when Australia is chosen from the select field, t ...

javascriptphpjqueryajaxleaflet