Titre de la description

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ante ipsum, fringilla nec diam ac, @@ -72,15 +190,15 @@ Etendue de mesure (kN) -

PrÃ©cision (erreur totale)

Non-linÃ©aritÃ©, % PE

@@ -89,34 +207,33 @@ -

diff --git a/public/_modules/product-onglet/product.js b/public/_modules/product-onglet/product.js index 06f9d0e..f195796 100644 --- a/public/_modules/product-onglet/product.js +++ b/public/_modules/product-onglet/product.js @@ -1,19 +1,23 @@ // jshint ignore: start -$('.product-nav').each(function () { - +$('.product-nav-item').each(function () { $(this).on('click',function () { let that = $(this); - // alert(that.data('nav')); - // TODO nav on click add class and remove class (last item clicked) $('.content-item').each(function () { if($(this).data('content') === that.data('nav')){ - - $(this).next().removeClass('active-content'); - $(this).addClass('active-content'); - + $(this).addClass('active-content').siblings().removeClass('active-content').addClass('hidden'); + that.addClass('active-nav').siblings().removeClass('active-nav'); } - }) + }); + + if($(window).width()< 940){ + $('.responsive-content').each(function () { + if($(this).data('content') === that.data('nav')){ + $(this).toggleClass('active-content').siblings().removeClass('active-content').addClass('hidden'); + that.find('.product-nav-arrow').toggleClass('rotate'); + } + }) + } }) }); diff --git a/public/_modules/product-onglet/style.styl b/public/_modules/product-onglet/style.styl index efee1e4..1b7ba26 100644 --- a/public/_modules/product-onglet/style.styl +++ b/public/_modules/product-onglet/style.styl @@ -7,23 +7,54 @@ $darkblue = #152F4E * padding: 0 - box-sizing: border-box + box-sizing: border-box !important margin: 0 font-family: $muli #product-detail .content + @media (max-width 940px) + display none max-width 1536px - padding 55px 0 48px 48px + padding 55px 48px 48px 48px background $lightgrey .product-nav - padding : 25px 50px + @media (max-width 940px) + flex-direction column + &-item + padding : 25px 50px + font-family $barlow + font-size: 18px + color: $darkblue + cursor pointer + position: relative + transition 400ms all ease + @media (max-width 940px) + &::after + content '' + background #E7E9F3 + left 48px + right 48px + bottom 0 + position absolute + height 1px + &-arrow + position: absolute + right 48px + display flex + transition 400ms all ease + @media (min-width 940px) + display none + .section-title + display flex font-family $barlow - font-size: 18px - color: $darkblue - cursor pointer + .responsive-content + @media (min-width 940px) + display none !important .active-nav background $lightgrey + @media (max-width 940px) + background white .description &-title font-family: $barlow @@ -56,4 +87,9 @@ $darkblue = #152F4E position relative background $dark top: -12px; - left: -7px; \ No newline at end of file + left: -7px; + .active-content + display flex + .rotate + transform: rotate(180deg) + transition 400ms all ease \ No newline at end of file