Change the background color of the panel-heading when clicking

Navigation
2

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 code above works as an accordion, it's the same code as the Bootstrap accordion. I would like to know, how to make the user to click on the "Panel-Heading", it stay with the green background, and when back get the white background without affecting the bottom heading. That is:

  • Before clicking it it will be with the white background.
  • After clicking, you will have the green background.
  • When you click on the link again to close it once it is open, or click on the heading 2 panel, it will have the white background again, and if it happens that the user clicks on the heading link in panel 2, it will perform the same things as link 1 in the first panel-heading. which link the accordion one, and vice versa.
    • asked by anonymous 16.05.2015 / 07:55

    1 answer

    1

    So, I'm going to use something like this, which I'm adapting to the script they posted in this link , and I think it's almost exactly what you want. In fact, it was only to remove in from colapse to <div id="collapseOne" class="panel-collapse collapse in"> , so that the first first panel was closed, and remove highlight from <div class="panel-heading highlight"> so that it originally appeared blank.

    The only thing is that when it closes, it still turns green, but take a look if it helps. I put the snippet, so just click below under "Run 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><scriptsrc="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>
        
    16.05.2015 / 09:12
    Passing data in javascript Automatically write to a default folder C #