Switching Symbols within a Roster

Take a look at the list defined in the link provided: http://jsfiddle.net/NNFEh/7/

Here is a portion of it:

<ul id="Boss">
    <li class="B">Beverages
        <ul>
            <li class="C">Hot
                <ul>
                    <li><a href="#">Lorem Ipsum</a>
            </li>
            <li><a href="#">Medswer</a>
            </li>
                </ul>
            </li>

        </ul>
    </li>

I am looking to include a +/- icon on all parent nodes, specifically those with classes B and C. You can refer to the CSS class found at http://jsfiddle.net/NNFEh/7/ where the icon has been assigned from a CSS sprite.

Initially, the two parent nodes (with class B) should display "+". Upon user clicking any of these parent nodes, it should switch to "-" and toggle back and forth accordingly.

Please advise on how I can accomplish this task. Thank you in advance.

jquerycss

Answer №1

To begin with, make sure to set your icon class properly. Then, you should alternate between both classes.

$(function () {
    $('#Boss ul').hide();//Hide all elements
    $('#Boss li').addClass('icon'); //Add the common class
    $('#Boss li').addClass('closed'); //Add the toggle class as closed
    $('#Boss li').on('click', function (e) {
        $(this).children('ul').slideToggle() //Toggle open/close
        $(this).toggleClass( "opened" ); //If it's open, remove or add the class
        $(this).toggleClass( "closed" ); //If it's closed, remove or add the class
    });
});

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

insert a new DOM element into an array using jQuery

Looking at the code snippet below: a_ajouter = $('.question'); hidden_div.push(a_ajouter); console.log(hidden_div); Upon examining the output in the console, instead of a DOM object being added to the div as intended, it shows &apo ...

javascriptjqueryhtml

When a child is added to a parent in Angular UI Tree, it automatically appears in all parent nodes as well

I've been experimenting with the drag and drop feature of Angular UI Tree, and I've encountered a puzzling issue. The JSON data is fetched from my services. Upon receiving it in my controller, I need to format it correctly by adding an empty arra ...

javascriptjqueryangularjsjsonangular-ui-tree

Having trouble aligning my slider in the center

Despite trying various methods to center this slider, such as using align="center" and different margin styles on the images and slider div itself, I am still facing alignment issues. Any assistance would be greatly appreciated. This is my first time posti ...

javascripthtmlcss

HTML displaying inaccurately

While following a Ruby tutorial to create a Sample App, I encountered an issue with the signup page. The errors displayed during sign up are not formatted correctly - the period at the end of the error line appears before it, and both the asterisk and bull ...

htmlcssrendering

The problem with jqGrid subgrid grouping: Subgrid remains visible even when groups are collapsed

I am currently utilizing free-jqgrid and have encountered an issue with a nested jqgrid inside another jqgrid (subgrid) that includes multi-select functionality. The parent grid is grouped successfully, but setting groupCollapse: true does not collapse the ...

javascriptjqueryjqgrid

What is the best way to adjust the mobile menu in Wordpress so that it takes up half of the screen width?

Encountering an issue after installing the "Mobile Navigation" Wordpress Plugin to implement a mobile menu on my custom theme that currently occupies 100% of the screen width. How can I adjust it to occupy only 50% of the screen width, as shown in the conc ...

csswordpress

The CSS_MODULES encountered a module build error when utilizing the extract-text-webpack-plugin

While processing CSS with CSS modules in a production environment, I encounter an error, but everything works fine in the development environment. Here is the configuration for webpack.base.js: const path = require("path") const webpack = require("webpac ...

javascriptcssreactjswebpackcss-modules

Syntax error in Ajax password recovery

Currently, I am facing a syntax error with a form that I recently converted from PHP to utilize Jquery/Ajax. My main goal is to test the functionality of the form to ensure it can successfully submit and reset passwords. The specific error message I keep ...

phpjqueryajax

Continuous animation loop

I'm looking to continuously loop the animate function in jQuery. Here's the code I have: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </scrip ...

javascriptjqueryhtmlcss

Prevent scrolling in a full-screen modal using CSS

I came across a beautiful fullscreen modal that is purely based on CSS. The only issue I encountered was that the modal isn't scrollable. I attempted various solutions but haven't been successful. Here's the script I am using: ...

htmlcssmodal-dialog

Maintain the scrollable feature of the element until the final content is reached

I'm struggling to come up with the right keywords to search for my issue. I've tried using Google, but it seems my search terms are not effective. The problem I'm facing involves two relative div elements with dynamic content. This means th ...

javascriptcsshtmltwitter-bootstrap

What is the best way to reinitialize a particular input field by using either the entered value or the total sum from buttons?

I successfully created a functional sum amount and reset button for a specific field that works perfectly outside of a form tag. However, I now need to place all the input fields and buttons inside a form tag to enable validation before submission. The de ...

javascriptjqueryhtml

What could be causing the paragraph margins to overlap and not display properly?

Two pages with identical layout and CSS stylesheets. One page displays correctly, while the other has overlapping margins for paragraphs. Unable to share entire source code due to length. Seeking insight into potential causes of this issue. https://i.sst ...

htmlcss

Tips for maintaining the same identifier, content, or text despite changes in the DOM

I am curious about a situation where the ID of a div is changed from 1 to 34, but when clicked on, the attribute still returns 1 instead of 34. I apologize for any language errors, thank you. $(document).on('click','.edit_btn:eq(0)& ...

javascriptphpjqueryhtmllaravel

Horizontal scroll through Bootstrap 4 navigation tabs

I'm currently using the newest Bootstrap 4 nav-tabs feature to create tabs and I'm aiming to keep all the tabs in a single horizontal line that can be scrolled. I've attempted to use various JavaScript plugins, but none of them seem to func ...

htmlcsstabsbootstrap-4

Creating a line break in the HTML form

While creating a header interface, I encountered an issue where the form with text input and submit button was automatically moving down the page, unlike my anchor tags which remained on the same line. I attempted using CSS properties like display: flex, ...

htmlcssmargincenterdisplay

What is the best way to modify attributes within HTML content that is dynamically generated by a script?

I'm currently implementing a widget script from a federated search service: <script type="text/javascript" id="s9f5b2bb09b74013279b22ae8d1b2df50" src="http://uleth.summon.serialssolutions.com/widgets/box.js"></sc ...

javascriptjqueryhtml

What is the best method to add a background image to a short div element?

For instance, here is some example HTML code: <div id="container_background"> <div id="content"> <p> #container </p> </div> </div> This is the CSS code that applies to the above HTML ...

htmlcss

Filter your data in jQuery DataTables using individual filters for each column

I'm currently working on a DataTables table that pulls data from an AJAX source. I have successfully set up the table and made searching functional. However, I've been asked to add search fields for each column. I found a DataTables Plugin for c ...

jqueryajaxdatatables

Issue encountered while transferring data using Ajax

I am a novice in the realm of ajax and currently immersed in a project that demands passing data from an ajax function to a php page for the purpose of dynamically generating and displaying modals. Although I am successful in creating the modal, I suspect ...

phpjqueryajax