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

Text within the footer section

When displaying the name of a subcategory, I want it in one line. However, if the subcategory name contains two words, it should be displayed in two lines. https://i.stack.imgur.com/CcDeL.png Code: .Footer { width: 100%; display ...

htmlcss

The function of jQuery .click() not triggering on elements within msDropDown

I'm having difficulty implementing jQuery on an Adobe Business Catalyst site. The HTML snippet below shows the structure: <div class="banner-main"> <div class="banner-top"> <section class="banner"> <div class="catProd ...

javascriptjqueryhtmlbusiness-catalystmsdropdown

Creating a jQuery tab plugin that utilizes an external method

Here is a simple tab plugin that I developed. I am looking for suggestions on how to make it easier to switch tabs using an external method. /** * Custom jQuery Tabs Plugin */ (function($) { $.fn.customTabs = function(options) { var default ...

jquery

Is there a way to incorporate text fields and input in BootstrapDialog?

Is it possible to include text fields and inputs within this modal using BootstrapDialog without modifying the library? Additionally, can I use $.ajax() inside? <button class="btn btn-primary" id="add_item">New item</button> jquery $('# ...

jqueryhtmlajaxbootstrap-dialog

Issues with jQuery animate.css functionality specifically occurring on Firefox browser

As a beginner in jQuery, I have been exploring different animations and recently came across an issue with Firefox compatibility. I discovered the animate.css library, and decided to incorporate its animations into text captions on a slider using the Soli ...

jqueryhtmlcssanimationwordpress

The issue with the max-height transition not functioning properly arises when there are dynamic changes to the max-height

document.querySelectorAll('.sidebarCategory').forEach(el =>{ el.addEventListener('click', e =>{ let sub = el.nextElementSibling if(sub.style.maxHeight){ el.classList.remove('opened&apos ...

javascriptcsscss-transitions

Sometimes, the `undefined` TypeError can unexpectedly pop up while making Ajax calls

Here is my issue with AJAX request and response: I have around 85 HTML pages that all use the same AJAX request. However, when working with these files, I sometimes encounter the following error. AJAX $(document).ready(function(){ localStorage.setIte ...

javascriptjqueryhtmlajax

Unable to adjust the border radius of a filled text-field variant in Material-ui-core

Situation at Present ...

javascriptcssreactjsmaterial-uistyled-components

Text alignment issues cause animation to vanish

Utilizing particles.js, I set up a full-screen particle effect by specifying the animation to be full-screen with height: 100vh;. This worked perfectly as intended. However, when attempting to add text on top of the particle animation and center it vertica ...

javascripthtmlcss

Is there a way to update the input box value with a variable using jquery?

I am currently facing an issue with changing the value attribute of an input box in a form using jquery. Although I am able to change the value, it does not reflect in the outer html. Below is my current code snippet: $("a").click(function(event) { va ...

javascriptjqueryhtmlforms

Position a dynamic <div> in the center of the screen

My goal is to design a gallery page with a list of thumbnails, where clicking on a thumbnail will open the related image in a popup div showing its full size. The issue I'm facing is how to center the popup div on the screen, especially when each pic ...

javascriptjqueryhtmlcss

Unable to conceal a DIV using React

I'm attempting to hide a div programmatically upon clicking a button. I've written the following code, but it doesn't seem to be working (the Div remains visible): import React, {useState} from 'react'; import './Button.css&ap ...

cssreactjs

Improving search functionality with autocomplete in EasyAdmin 3.3 filter options

Is there a quick solution in easyadmin 3.3 to implement an autocomplete feature for filters? I have successfully used it in forms, but encountering an undefined error with filters. public function configureFields(string $pageName): iterable { r ...

jqueryfilterautocompleteeasyadmin3

Changing time format from ISO time to short time in JavaScript

I am working on an ajax call that retrieves a time in the format 16:06:59, and I need to convert it to 4:06 PM. var mydate = obj[0].time; The variable mydate contains 16:06:59, but when I try to use it with var date = new Date(), it returns today's ...

javascriptjquery

What are the steps to create a CSS 'shell' design?

How can I create an image displayed as a circle with border-radius:50%, along with some text on the same line that has a set width and background color? I want to achieve this without hard coding values. What is the best approach to do this? Check out the ...

htmlcsscss-shapes

Overlap caused by padding between two elements

I'm encountering an issue where adding padding to a block element is causing it to overlap with the padding of other elements. Below is the code snippet showcasing this problem. <section class="hero"> <h1>Studying REDEFIN ...

htmlcss

Disable sorting options in the Datatable ColumnFilterWidget

I'm currently working with datatables ColumnFilterWidget and I'd like to prevent the widget from sorting the values displayed in the select box. Despite trying the "bSort": false option of the ColumnFilterWidget, it doesn't seem to have any ...

javascriptjquerysortingfilterdatatable

Modify the image source using Javascript

I need to update the src attribute of an image in a parent element nested within a ul li when a link is clicked. Here's my code so far. I know how to use JavaScript to change the src attribute, but I'm not sure how many levels I need to go up to ...

javascriptjquery

After activating the rewrite feature on Tomcat valve, JavaScript is loading twice

I've implemented the Tomcat rewrite valve in my single-page application to direct all requests, except for static resources, to my index.html file. Here is what my rewrite.config looks like: RewriteCond %{REQUEST_URI} (?!.*\.(?:jpg|png|css|js|js ...

javascriptjquerytomcaturl-rewritingtomcat-valve

Instead of presenting MySQL data in tables on an HTML page, showcase it in editable text boxes

I have successfully imported data from my database table into an HTML table, but now I want to display them in locked text boxes. When the user clicks an "edit" button, the corresponding text box should become unlocked so that they can edit the data and sa ...

javascriptphphtmlcsscontenteditable