how to change css using jquery in twitter bootstrap3

Question

I am having collapsible panels in bootstrap

<div class="panel panel-default">
                      <div class="panel-heading"> <h4> <a data-toggle="collapse" href="#collapse2">ADDRESS</a></h4></div>
                        <div id="collapse2" class="panel-collapse collapse">
                            <div class="panel-body">
                              <div class="list-group">
                                <?php

                                        echo "<a href='#' class='list-group-item'>".$_GET['addr']."</a>";
                                ?>
                              </div>
                            </div>
                        </div>
                    </div>

to which onclick I am toggling the class from panel-default to panel-primary using jquery and changing the css on particular click and onmouseover events. for Jquery I am using the code.

$( function() {
              $('.panel-default').click( function() {
                  $(this).toggleClass('panel-primary');
                $(this).find('a:first').css({'color':'white','text-decoration':'none'});
                } );

            $('.panel-primary').on('click',function(){

                $(this).toggleClass('panel-default');
                $(this).find('a:first').css({'color':'red','text-decoration':'none','font-size':'100px'});
            });

            $('.panel-default').on('mouseover',function(){$(this).find('a:first').css({'text-decoration':'none'});});

        });

but once it toggles back to panel-default from panel-primary its not changing the css of a:first and remains in white color.

use the `.first()` instead of `a:first` – mmativ Mar 03 '16 at 09:55 — mmativ, Mar 03 '16 at 09:55

score 0 · Answer 1 · edited May 23 '17 at 11:59

Since you are changing the class dynamically, your $('.panel-primary').on('click',function(){..}) is not added to the button. In case of normal event handlers, it will register the handlers to only those elements which satisfies the selector when the registration script is executed.

jQuery click event not working after adding class

In your case a more appropriate solution will be is to use the collapse events and css like

$(function() {
  $('.panel').on('shown.bs.collapse hidden.bs.collapse', function(e) {
    $(this).toggleClass('panel-primary', e.type == 'shown')
  })
});

.panel.panel-primary a[data-toggle="collapse"] {
  color: red;
  text-decoration: none;
  font-size: 100px;
}

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>


<div class="panel panel-default">
  <div class="panel-heading">
    <h4> <a data-toggle="collapse" href="#collapse2">ADDRESS</a></h4>
  </div>
  <div id="collapse2" class="panel-collapse collapse">
    <div class="panel-body">
      <div class="list-group">
        some content
      </div>
    </div>
  </div>
</div>

how to change css using jquery in twitter bootstrap3

1 Answers1