jQuery addClass example

Change class name on click in jQuery

by franjuju

HTML

<div id="section-1-details-objectifs1-plus">ouvrir test 1 +</div>
<div id="section-1-details-objectifs2-plus">ouvrir test 2 +</div>
<div id="section-1-details-objectifs3-plus">ouvrir test 3 +</div>

<div class="section-1-details-objectifs" id="section-1-details-objectifs1">Test1</div>
<div class="section-1-details-objectifs" id="section-1-details-objectifs2">Test2</div>
<div class="section-1-details-objectifs" id="section-1-details-objectifs3">Test3</div>

CSS

#section-1-details-objectifs1, #section-1-details-objectifs2, #section-1-details-objectifs3 {
	width:100%;
	height:20px;
	display: none;
	margin-bottom: 0;
  background-color: blue;
  color: white;
  cursor: pointer;
}

JavaScript

$(document).ready(function(){
      $("#section-1-details-objectifs1-plus").click(function(){
        $(".section-1-details-objectifs").slideUp('slow', function() {
          $("#section-1-details-objectifs1").slideToggle(600);
        });
      });
      
      $("#section-1-details-objectifs2-plus").click(function(){
        $(".section-1-details-objectifs").slideUp('slow', function() {
          $("#section-1-details-objectifs2").slideToggle(600);
        });
      });

      $("#section-1-details-objectifs3-plus").click(function(){
        $(".section-1-details-objectifs").slideUp('slow', function() {
          $("#section-1-details-objectifs3").slideToggle(600);
        });
      });
});