Change panel-Heading background color by clicking

Question

HTML

            <!-- panel 1 -->
            <div class="panel panel-default pulse animated">
                 <div class="panel-heading" role="tab">
                      <h1 class="panel-title">
                        <a id="link-open" class="text-pan collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                            <center><i class="glyphicon glyphicon-map-marker gly-circle"></i></center>
                            <h2 id="title-cat">TÍTULO 01</h2>
                        </a>
                      </h1>    
                  </div>
                  <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body" id="panel-mob">
                      <div class="thumbnail">
                        <img data-src="holder.js/100%x200" alt="100%x200" src="imagens/background/screens-mob/bg-mob-one.jpg" />
                        <div class="caption-mob panel-body">
                          <h3 class="caption-title-mob animated fadeInDown">TÍTULO 01</h3>
                          <p class="caption-text-mob animated fadeInDown">texto aqui</p>
                          <a href="petbusca/pet.html" class="btn btn-success btn-lg btn-config btn-mob"><span class="animated rubberBand">acessar »</span></a>  
                          </div>
                      </div>
                    </div>
                  </div>
            </div>
            <!-- / panel 1 -->

            <!-- panel 2 -->
            <div class="panel panel-default pulse animated">

              <div class="panel-heading" role="tab">
                    <h1 class="panel-title">
                      <a id="link-open-two" class="text-pan collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                          <center><i class="glyphicon glyphicon-home gly-circle"></i></center>
                          <h2 id="title-cat">TITULO</h2>
                      </a>
                    </h1>    
              </div>

              <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body" id="panel-mob">
                  <div class="thumbnail">
                    <img data-src="holder.js/100%x200" alt="100%x200" src="imagens/background/screens-mob/bg-mob-two.jpg" />
                    <div class="caption-mob panel-body">
                      <h3 class="caption-title-mob animated fadeInDown">TÍTULO 02</h3>
                      <p class="caption-text-mob animated fadeInDown">TEXTO AQUI</p>
                      <a href="vetemcasa/vet.html" class="btn btn-success btn-lg btn-config btn-mob"><span class="animated rubberBand">acessar »</span></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- / panel 2 -->           
        </div>

The above code acts as an accordion, it is the same code as the Bootstrap accordion. I would like to know, how to make the user by clicking on the "Panel-Heading", he stay with the green background, and when he comes back stay with the white background, without affecting the Heading from below. That is to say:

1. Before clicking it will be with the white background.
2. After you click you will have the green background.
3. By clicking again on the link (Heading) to close the same after opened, or clicking on the Heading 2 panel, it will stay with the white background again, and in case the user happens to click on the Heading link from panel 2, it will run the same things as link 1 from the first panel-Heading. that the link of accordion one, and vice versa.

Answer 1

So, I’m going to use something similar, which I’m adding to the script that they posted at this link, and I think it’s almost exactly what you want. Actually it was just taking out the in of colapse in <div id="collapseOne" class="panel-collapse collapse in">, so that the first panel appeared closed, and take out the highlight of <div class="panel-heading highlight"> so that originally it appeared in white.

The only thing is that when it closes, it still turns green, but take a look if it helps you. I put the snippet, so just click there below on "Run code snippet".

    function toggleChevron(e) {
          $(e.target)
            .prev('.panel-heading')
            .find('i.indicator')
            .toggleClass('glyphicon-minus glyphicon-plus');
            //$('#accordion .panel-heading').css('background-color', 'green');
    				$('#accordion .panel-heading').removeClass('highlight');
    				$(e.target).prev('.panel-heading').addClass('highlight');
    }
    $('#accordion').on('hidden.bs.collapse', toggleChevron);
    $('#accordion').on('shown.bs.collapse', toggleChevron);

    .panel-heading .accordion-toggle:after {
    	/* symbol for "opening" panels */
        font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    	content: "\e113";    /* adjust as needed, taken from bootstrap.css */
    	float: right;        /* adjust as needed */
    	color: black;         /* adjust as needed */
    }
    .panel-heading .accordion-toggle.collapsed:after {
    	/* symbol for "collapsed" panels */
        content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    }
    .accordion-toggle:hover {
    	text-decoration: none;
    }
 #accordion .highlight {
    	background:green;
    	transition:background 2s ease;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<div class="panel-group" id="accordion">
    		<div class="panel panel-default">
    				<div class="panel-heading">
    						<h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <i class="indicator glyphicon glyphicon-minus"></i> Collapsible Group Item #1 </a> </h4>
    				</div>
    				<div id="collapseOne" class="panel-collapse collapse">
    						<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardsoad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
    				</div>
    		</div>
    		<div class="panel panel-default">
    				<div class="panel-heading">
    						<h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> <i class="indicator glyphicon glyphicon-plus"></i> Collapsible Group Item #2 </a> </h4>
    				</div>
    				<div id="collapseTwo" class="panel-collapse collapse">
    						<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
    				</div>
    		</div>
    		<div class="panel panel-default">
    				<div class="panel-heading">
    						<h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> <i class="indicator glyphicon glyphicon-plus"></i> Collapsible Group Item #3 </a> </h4>
    				</div>
    				<div id="collapseThree" class="panel-collapse collapse">
    						<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
    				</div>
    		</div>
    </div>