alidads alidads - 4 months ago 12
jQuery Question

active color using jquery

please see code bottom, is about the bootstrap accordion, as you can see part of codes where it show on 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'm trying to add (icon, text and background COLOR) using css .active and jquery..

please see the same 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>


in 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 question is that how can write addiation code to allow change (icon, text and background color) when person click on the title name ..

Answer

I assume all of your given code works. Remove all active class from all the elements and add it to the clicked element.

jQuery('.accordion dt').click(function() {
     jQuery(this).find('i').toggleClass('fa-chevron-up fa-chevron-down ').closest('dt').next()
     .slideToggle().siblings('.accordion_content').slideUp();
    //changes starts 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>