utilizing jquery for dynamic color changes

Check out the code snippet below, which involves the bootstrap accordion and showcases certain elements within the title section.

<dt><span><i class="fa fa-tachometer" aria-hidden="true"></i>&nbsp;&nbsp;Manage</span><i class="accordion_icon fa fa-chevron-up"></i></dt>

I am attempting to incorporate (icon, text, and background COLOR) using css .active and jquery..

Please refer to the following code...

<dt><span><i class="fa fa-tachometer" aria-hidden="true"></i>&nbsp;&nbsp;Settings</span><i class="accordion_icon fa fa-chevron-up"></i></dt>
    <dd class="accordion_content">
    <div class="list-group">
   <a href="#" class="list-group-item list-group-item-action"><i class="fa fa-user" aria-hidden="true"></i>&nbsp;&nbsp;Members</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa fa-clipboard" aria-hidden="true"></i>&nbsp;&nbsp;Posts</a>
  <a href="#" class="list-group-item list-group-item-action"><i class="fa fa-comments" aria-hidden="true"></i>&nbsp;&nbsp;Comments</a>
  <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-user-secret" aria-hidden="true"></i>&nbsp;&nbsp;Privacy</a>
  <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-bell" aria-hidden="true"></i>&nbsp;&nbsp;Notifications</a>
  <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-envelope" aria-hidden="true"></i>&nbsp;&nbsp;Emails</a>
  <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-globe" aria-hidden="true"></i>&nbsp;&nbsp;Sites Infor</a>
</div>
    </dd>

Regarding css..

.active{
color:blue;
background-color:red;
}

And in jquery 

   jQuery('.accordion dt').click(function() {
         jQuery(this).find('i').toggleClass('fa-chevron-up fa-chevron-down ').closest('dt').next()
         .slideToggle().siblings('.accordion_content').slideUp();

    });

jQuery('.accordion_content').hide();

My query is how can I write additional code to enable changing (icon, text, and background color) when a user clicks on the title name ..

jquerycsscolorsaccordion

Answer №1

In the scenario where all provided code is operational, the objective at hand is to eliminate the active class from all elements and subsequently assign it to the element that was clicked.

jQuery('.accordion dt').click(function() {
     jQuery(this).find('i').toggleClass('fa-chevron-up fa-chevron-down ').closest('dt').next()
     .slideToggle().siblings('.accordion_content').slideUp();
    //The changes start here;
    jQuery('.accordion dt').removeClass('active');
    jQuery(this).addClass('active');

});


$(function() {
  $('dt').click(function() {

    $(this).find('i').toggleClass('fa-chevron-up fa-chevron-down ').closest('dt').next()
      .slideToggle().siblings('.accordion_content').slideUp();
    $('dt').removeClass('active');
    $(this).addClass('active');
  });

  $('.accordion_content').hide();
});
.active {
  color: blue;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<dt><span><i class="fa fa-tachometer" aria-hidden="true"></i>&nbsp;&nbsp;Settings</span><i class="accordion_icon fa fa-chevron-up"></i></dt>
<dd class="accordion_content">
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action"><i class="fa fa-user" aria-hidden="true"></i>&nbsp;&nbsp;Members</a>
    <a href="#" class="list-group-item list-group-item-action"><i class="fa fa-clipboard" aria-hidden="true"></i>&nbsp;&nbsp;Posts</a>
    <a href="#" class="list-group-item list-group-item-action"><i class="fa fa-comments" aria-hidden="true"></i>&nbsp;&nbsp;comments</a>
    <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-user-secret" aria-hidden="true"></i>&nbsp;&nbsp;Privacy</a>
    <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-bell" aria-hidden="true"></i>&nbsp;&nbsp;Notifications</a>
    <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-envelope" aria-hidden="true"></i>&nbsp;&nbsp;Emails</a>
    <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-globe" aria-hidden="true"></i>&nbsp;&nbsp;Sites Infor</a>
  </div>
</dd>
<dt><span><i class="fa fa-tachometer" aria-hidden="true"></i>&nbsp;&nbsp;Settings</span><i class="accordion_icon fa fa-chevron-up"></i></dt>
<dd class="accordion_content">
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action"><i class="fa fa-user" aria-hidden="true"></i>&nbsp;&nbsp;Members</a>
    <a href="#" class="list-group-item list-group-item-action"><i class="fa fa-clipboard" aria-hidden="true"></i>&nbsp;&nbsp;Posts</a>
    <a href="#" class="list-group-item list-group-item-action"><i class="fa fa-comments" aria-hidden="true"></i>&nbsp;&nbsp;comments</a>
    <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-user-secret" aria-hidden="true"></i>&nbsp;&nbsp;Privacy</a>
    <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-bell" aria-hidden="true"></i>&nbsp;&nbsp;Notifications</a>
    <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-envelope" aria-hidden="true"></i>&nbsp;&nbsp;Emails</a>
    <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-globe" aria-hidden="true"></i>&nbsp;&nbsp;Sites Infor</a>
  </div>
</dd>

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

implementing a feature to save and showcase a list of preferred names using jquery/ajax without the

On my website, individuals have the ability to search for any name from around the globe. Users can add specific names to their favorites list, which they can view on a separate page containing all of the names added during their current session. I would ...

jqueryajaxdynamic

A guide to filling an irregular shape (such as a star) based on a percentage using CSS in a React project

I am currently working on developing a React component that showcases a rating percentage using a star icon with two different shades. For example, if the input rating is 79%, I want to display a star with 79% of it in gold color and the remaining 21% in ...

cssreactjsmaterial-uifont-awesome

Troubleshooting ASP.NET Content Page Error: jQuery Object Expected

Currently working on designing a personal ASP.NET Web page, I have encountered an issue with making a sticky div using jQuery. Despite all my other jQuery functions functioning properly, the sticky div seems to be causing trouble. stickydiv.js $(document ...

javascriptjqueryhtmlasp.netcss

Adding a new row to a Bootstrap table while maintaining the consistent style

Is there a way to dynamically add a new table row with different styling using jQuery? I'm facing this particular issue and need help in solving it. Below, I have included some screenshots of my code and the view for better understanding. Here is the ...

javascriptjqueryhtmlajaxbootstrap-4

Interactive hover text appears when you mouse over the SVG path

Does anyone know the simplest way to display sample text when hovering over an svg path? Below is my CSS code: <style> path:hover{ fill:yellow;stroke:blue; } .available { fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;strok ...

javascriptjquerycsssvg

Bootstrap is causing issues with unidentified div elements

I recently embarked on creating a slideshow using HTML, CSS, and jQuery. After completing the slideshow, I decided to add an interactive page beneath it. To streamline the layout process, I opted to utilize Bootstrap. However, upon loading Bootstrap, I en ...

javascriptjqueryhtmlcsstwitter-bootstrap

Card columns with dropdown extending into adjacent column

Encountering a strange problem with the card-columns layout in Bootstrap when using dropdown menus within the cards. The issue arises when the dropdown-menu divs of the lower cards bleed into the next column, despite appearing in the correct position. Thi ...

htmlcsstwitter-bootstrapbootstrap-4

Utilize jQuery's .append() function to dynamically insert content into your webpage

I currently have tab elements set up like this: <div class="tab-pane fade active in" id="tab-a"> </div> To populate the content of that tab with a JavaScript string array, I am using the following code snippet: var full_list = ""; for (var ...

javascriptjqueryhtml

Is the CSS Transition Solely Active for the Introductory Animation?

I'm currently looking to enhance the smoothness of div expansion and contraction on hover using CSS transitions. However, I have noticed that the Transition property only seems to affect the entry animation (i.e., when the mouse hovers and the div exp ...

javascripthtmlcssreactjsweb

Slow rotation in CSS styling

.badge { -webkit-transform-style: preserve-3d; -webkit-perspective: 1000; position: relative; } .back, .front { position: absolute; -webkit-backface-visibility: hidden; -webkit-transition: -webkit-transform 1s ease-in; width: ...

animationcssrotationflip

How can I use JQuery to iterate through Object data and dynamically create tr and td elements?

In previous projects, I utilized Vanilla JS to iterate through Ajax return data and construct tables. However, for this current project, I have decided to switch over to JQuery. The main reason behind this decision is that some of the td elements require s ...

javascriptjqueryhtmlajax

Challenges with the dropdown menu navigation bar

I am struggling with my dropdown menu and sign up/sign in buttons as they are not aligning properly. I have tried various coding methods but haven't been able to fix the issue. Can someone provide me with suggestions on how to rectify this problem? c ...

javascriptphphtmljquerycss

The console is not displaying the data from the useForm

I am working on a project to create a Gmail clone. I have implemented the useForm library for data validation. However, when I input data into the form and try to print it to the console, nothing is being displayed. const onSubmit = (data) => { ...

javascripthtmlcssreactjsredux

Blinking Effect of New Element in JQuery ListView

I'm attempting to implement AJAX functionality in a JQuery listview that will make flash yellow, but unfortunately I am having trouble getting it to work. Could someone provide me with some guidance? http://jsfiddle.net/zFybm/ ...

jquerycssjquery-uijquery-mobile

How to Process a Stripe Payment using jQuery AJAX (JavaScript Only)

I'm in the process of creating a custom payment form for Stripe and I want to manually initiate the AJAX call to connect with Stripe. Instead of relying on a typical submit event. Unfortunately, it seems like I might be sending the request to the inc ...

javascriptjqueryajaxstripe-payments

Sending a collection of items to a web API endpoint

Hey there, I'm having an issue with posting a list of objects to a web API method using the following code snippet: var uri = "http://localhost:" + port + "/api/Account"; $.ajax({ dateType: "json", method: "POST", url: uri, da ...

jquerypostasp.net-web-api

Performing a search using Jquery Ajax when the return key is pressed on Internet Explorer

I have come across this code snippet for implementing a search feature on my website. It works perfectly fine, except for one issue - the search functionality doesn't work in Internet Explorer when users press the return key. Does anyone have any sug ...

internet-explorersearchjquery

Utilizing Bootstrap 4: The Use of an anchor tag in a button element

I am facing a situation where I have an icon represented by the HTML code <a>, which acts as a link redirecting to a different page. This <a> is nested inside a collapsible button, meaning that clicking on the icon expands the menu before actua ...

htmlcssbootstrap-4

Access an attribute using slashes in Jquery

I've been struggling to use jQuery to select an object based on a unique filename attribute. However, I'm facing issues with escaping slashes when the selector is created using a variable. Despite spending hours trying different combinations, I s ...

javascriptjqueryhtmljquery-selectorsescaping

Display the background image beyond the boundaries of the div element

I am facing an issue with an image background on a website. The background consists of leaves spreading out to the middle of the page, creating a height of 600px. However, I need to divide this image into three sections: header, content, and footer. Curren ...

htmlcssbackground