Update the default arrow icon in the expand/collapse navigation bar

I need help changing the downward arrow in the code below to a fontawesome icon. I'm unsure about how to:

1. Remove the default arrow on the right of the parent node.

2. Use "+/-" symbols to represent the collapse state.

It seems that the onclick code is not functioning as expected.

Currently, the code displays + Parent Node >

When I click on the "+" sign, the list expands but the "+" sign is replaced with an empty square instead of a "-" sign.

<a href="#homeSubmenu" class="dropdown-toggle" data-toggle="collapse" 
   onclick="$('#AAA').toggleClass('fas fa fa-minus')">

<i class="fas fa fa-plus" id="AAA"></i>
   Parent Node
</a>

<ul class="collapse list-unstyled" id="homeSubmenu">
    <li>
        <a href="#">Sub Node 1</a>
    </li>
    <li>
        <a href="#">Sub Node 2</a>
    </li>
</ul>

I appreciate any guidance on this matter.

javascriptjquerycsshtmlbootstrap-4

Answer №1

If you want to hide the dropdown arrow, you can use the following CSS:

.dropdown-toggle::after {
   display: none;
}

UPDATE: To change the icon, modify your onclick function like this:

$('#AAA').toggleClass('fa-minus fa-plus')

Answer №2

Use toggleClass to switch between plus and minus signs: 

$('#AAA').toggleClass('fa-minus').toggleClass('fa-plus')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<a href="#homeSubmenu" class="dropdown-toggle" data-toggle="collapse" 
    onclick="$('#AAA').toggleClass('fa-minus').toggleClass('fa-plus')">

<i class="fas fa fa-plus" id="AAA"></i>
    Parent Node
</a>

<ul class="collapse list-unstyled" id="homeSubmenu">
    <li>
        <a href="#">Sub Node 1</a>
    </li>
    <li>
        <a href="#">Sub Node 2</a>
    </li>
</ul>

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

Display the div when scrolling downwards beyond 800px

Is there a way to display a hidden section when scrolling down the page, specifically after reaching a point 800px from the top? I currently have an example code that may need some modifications to achieve this desired effect. UPDATE: [Additionally, when ...

jqueryhtmlcss

What is the best way to determine font size based on the width of the

In order to ensure that certain elements on my page do not exceed specific widths, it is crucial for me to use a monospaced font. This will limit the horizontal "stride" between characters to stay within a specified threshold. However, simply setting the ...

cssfonts

Modifying the key of a JSON object can result in the alteration of other associated values as well

Overview: A JSON Object var JSON_OBJECT = []; has been defined as a global variable. [ { "user_id": "123", "AF": [ { "formula_type": 0, "lag": 0 } ], "Trend": [ { "is_active": 0 ...

javascriptjqueryjsonkey-value

Tips for aligning a div below another div nested within a separate container

Can I position div#d2 directly beneath the div#d1 container according to the code below, instead of positioning it outside the height of the wrapper? #wrapper { height: 100%; display: flex; background-color: steelblue; align-items: center; min ...

htmlcsscss-positionflexbox

Tips for verifying the password of a protected post using ajax?

I have set a password for a protected post. Now, I want to verify the entered password using ajax. Here is the HTML code: <form class="protected-post-form" action=".../wp-pass.php" method="post> <input name="post_password" id="pwbox-4470" t ...

jqueryajaxwordpresspost

Ensuring Your IMG is Perfectly Centered in DIV Across all Browsers

I have tried all the tips from the top Google results, but I am still struggling to center an image within a div. For example, the popular tricks mentioned in this link: or http://www.w3.org/Style/Examples/007/center.en.html do not seem to work in IE 8. ...

css

How to Handle the Absence of HTML5 Spellcheck in Specific Web Browsers

While HTML5 spellcheck functionality may vary across different browsers, there are instances where it might not be supported in certain corporate environments. In the event that HTML5 is not supported in a particular browser, it's essential to first c ...

javascripthtmlspell-checking

Is there a way to implement a collapse/expand feature for specific tags in React-Select similar to the "limitTags" prop in Material UI Autocomplete?

Utilizing the Select function within react-select allows me to select multiple values effortlessly. isMulti options={colourOptions} /> I am searching for a way to implement a collapse/expand feature for selected tags, similar to the props fun ...

javascriptreactjsmaterial-uireact-select

Aggregate X and Y values based on a key in a scatter plot using dc.js

Here is a glimpse of my dataset: var items = [ {name: "X", duration: 1, quantity: 2}, {name: "X", duration: 2, quantity: 1}, {name: "Y", duration: 1, quantity: 4}, {name: "X", duration: 3, quantity: 1 ...

javascriptdc.js

Choosing elements in HTML using jQuery from an Ajax GET response

As a programming student, I am currently working on developing a basic website using HTML, JavaScript, and jQuery for the front-end, while utilizing node.js and Express frameworks for the back-end. In my project, I have used Ajax to retrieve data and then ...

javascriptjqueryhtmlajaxexpress

Why is the dropdown bootstrap component not functioning in the browser?

The dropdown-item in my code, taken from the Bootstrap site, is not working properly. The toggle displays but the item does not. What could be causing the Bootstrap dropdown component to malfunction in the browser? Are there any issues with my CDNs? ...

cssdrop-down-menufrontenddropdownbootstrap-5

Getting the value from the object that holds the Provider/Consumer using React's Context API

Below is a demonstration using the Context API object with a library called 'react-singleton-context'. Check it out here. In my Menu.js file, I have the code snippet console.log(useSharedDataContext()). This displays an object containing Consume ...

javascriptreactjsreact-context

Using CSS to ensure that the cards have consistent heights when using both React and Bootstrap

I am currently working with Bootstrap 4 in React. I have encountered an issue where the card for Item 1 is shorter than that of Item 2, and I would like both cards to have the same height. Additionally, I anticipate adding more cards at the bottom in the ...

cssreactjsbootstrap-4

Top method for integrating Bootstrap into an AngularDart application

Currently in the process of developing a web application using AngularDart 5 and Dart SDK 2.0.0-dev.65.0. What would be the most effective method for integrating Bootstrap into my project? Appreciate any insights! ...

dartbootstrap-4angular-dart

Is there a way to alter the text color using JavaScript on the client side?

Is there a way to change the color of a list item in a ul based on whether it is a palindrome or not? Here is the JavaScript file I am working with: function isPalindrome(text){ return text == text.split('').reverse().join(''); } c ...

javascripthtmlformsstylesevent-listener

You can only set headers once during the initial request; any additional attempts to set headers will result in an

I encountered a specific issue with the error message "Can't set headers after they are sent". Here is the relevant code snippet: create: (request, response, next) -> socket = @app.socket # # This method will be used to call the right method ins ...

javascriptnode.jsexpresscoffeescript

CSS filter for Internet Explorer

Can this CSS class be made to work in Internet Explorer 11? .inactive { filter: contrast(0.5) sepia(100%) hue-rotate(116deg) brightness(1.2) saturate(0.28); } I attempted to implement the SVG grayscale filter but it was unsuccessful, causing issu ...

cssinternet-explorer-11grayscalecss-filters

The size of Bootstrap 3 columns adjusts dynamically based on the width of the window as the page is being

I am facing an issue with the layout of my bootstrap site when resizing the 3 horizontal columns based on the window size upon page load. Currently, I have a script that adjusts the height of each column to match the tallest one so they appear uniform whe ...

javascriptjqueryhtmlcsstwitter-bootstrap

Utilizing Javascript to Connect with Java Web API

I'm seeking assistance with transferring a file from a browser to another device connected to a server-operated machine. I am relatively new to web application and back-end programming. The current code allows for moving a file from the server to the ...

javascripthtmlangularjs

Issue with Bottle.py: When using AJAX, request.forms.get() is returning NoneType

Having trouble sending JavaScript data to a bottle.py server using AJAX? Despite trying numerous solutions from various sources, none seem to be working. To provide clarity, I'm focusing on the AJAX call code here. Can someone explain why request.for ...

javascriptpythonajaxbottle