jQuery addClass example

Change class name on click in jQuery

by franjuju

HTML

<div class="container">
    <nav>
        <a href="#">ouvrir test 1 +</a>
        <a href="#">ouvrir test 2 +</a>
        <a href="#">ouvrir test 3 +</a>
    </nav>
    
    <div class="content">
        <div>Test1</div>
        <div>Test2</div>
        <div>Test3</div>
    </div>
</div>

CSS

.container nav a{
  display:block;
  text-decoration:none;
  color:black;
}
.container .content div{
	height:20px; /*  est ce raisonnable ? */
	display: none;
	margin-bottom: 0;
  background-color: blue;
  color: white;
}

JavaScript

$('.container nav a').each(function(index){
  $(this).on('click', function(e){
    var $divs = $(this).closest('.container').find('.content div'),
        $target = $divs.eq(index);
    $divs.slideUp();  //ferme tout
    $target.slideDown(); //ouvre la cible
    e.eventDefault();
  });
});