JSFiddle - React, Tailwind, and code Playground

by stalker069

HTML

<div class="year">
  <span class="triangle_add calendar_triangle"></span>
  <div class="title_periods_select">
    <span class="span_year" data-pos="1">2016</span>
  </div>
  <span class="triangle_subtract calendar_triangle"></span>
</div>

CSS

.title_periods_select{
    display: block;
    height: 1.2vw;
    width: 3.5vw;
    overflow: hidden;
}
.span_year{
    position: relative;
    float: left;
} 
.periods .off{
    display:none;
}
.calendar_triangle{
    display:block;
    cursor: pointer;
}
.triangle_subtract{
    background:#000;
    background-size: 100% 100%;
    width: 2.92vw;
    height: 1.2vw;
}
.triangle_add{
    background:#000;
    background-size: 100% 100%;
    width: 2.92vw;
    height: 1.2vw;
}

JavaScript

//ajoute une année et l'affiche sur le calendar
$('.year .triangle_add').click(function() {
        //recupere la hauteur du texte
        var height = $('.span_year').height();
        //recupere l'année
        var year = $('.span_year').html();
        //converti en entier et ajoute une année
        year = parseInt(year)
        year = year +1;
        $(".span_year[data-pos='1']").addClass('delete');
        //creer la nouvelle zone de texte date
        $( ".title_periods_select" ).append( '<span class="span_year" data-pos="2"></span>' );
        //insert le texte dans la balise
        $(".span_year[data-pos='2']").text(year);
        //annimation de roulette
        $( ".span_year" ).animate({
            top: "-="+height
          }, 1000, function() {
            //attend que la suppréssion soit faite pour modifier le data-pos
            $(".delete").remove();
            $( ".span_year[data-pos='2']" ).attr('data-pos',1);
            $(".span_year[data-pos='1']").css('top',"0px");
        });
        
        //FONCTION AJAX POUR AFFICHER LES CALENDAR +1 YEAR

});
 //gestion -1 année
    $('.year .triangle_subtract').click(function() { 
        //recupere la hauteur du texte
        var height = $('.span_year').height();
        //recupere l'année
        var year = $('.span_year').html();
        //converti en entier et ajoute une année
        year = parseInt(year)
        year = year - 1;
        $(".span_year[data-pos='1']").addClass('delete');
        //creer la nouvelle zone de texte date
        $( ".title_periods_select" ).prepend( '<span class="span_year" data-pos="2"></span>' );
        //insert le texte dans la balise
        $(".span_year[data-pos='2']").text(year);
        $(".span_year").css('top',-height);
        //annimation de roulette
        $( ".span_year" ).animate({
            top: "+="+height
          }, 1000, function() {
            //attend que la suppréssion soit faite pour modifier le data-pos
//           ...