jQuery

【jQuery】レスポンシブタブTabDrawer

May 13, 2017
TabDrawer.js

TabDrawerはjQueryのレスポンシブタブ

<div class="c-clothes m-tabdrawer">

			<!-- tabs -->
			<div class="m-tabdrawer__tabs">
		        <div class="js-tabdrawer-tab m-tabdrawer__tabs__tab font-helveticaBold" data-index="1">FIT GUIDE</div>
		        <div class="js-tabdrawer-tab m-tabdrawer__tabs__tab font-helveticaBold" data-index="2">CARE</div>
		        <div class="js-tabdrawer-tab m-tabdrawer__tabs__tab font-helveticaBold" data-index="3">MATERIALS</div>
		    </div>

  <div class="m-tabdrawer__drawer">

<!-- tab 1 -->
	<h3 class="js-tabdrawer-drawer m-tabdrawer__drawer__heading font-helveticaBold" data-index="1">FIT GUIDE</h3>
 <div class="js-tabdrawer-content m-tabdrawer__content c-clothes">
   <div class="c-clothes__copy font-helvetica">Integer vel arcu ac dolor tincidunt dapibus. Nam sit amet lacinia velit. Pellentesque vel urna diam. Nunc sit amet justo malesuada, tincidunt massa eu, placerat est. Suspendisse commodo pellentesque gravida. Donec suscipit vulputate odio, at eleifend purus condimentum in. Praesent sed cursus sem. Donec mattis urna efficitur diam sagittis, id maximus orci dictum. Etiam non congue felis, et varius augue. Aliquam et ullamcorper massa. Nullam interdum lobortis volutpat. Etiam leo arcu, vulputate vel commodo sit amet, ullamcorper varius dui.</div>
 </div>


<!-- tab 2 -->
<h3 class="js-tabdrawer-drawer m-tabdrawer__drawer__heading font-helveticaBold" data-index="2">CARE</h3>
  <div class="js-tabdrawer-content m-tabdrawer__content">
  <div class="c-clothes__copy font-helvetica">Quisque a turpis fermentum, dapibus mauris quis, dignissim ligula. Aliquam aliquet tellus nunc, non fermentum leo dictum vel. Morbi vehicula laoreet felis ac blandit. Sed mi urna, feugiat nec rhoncus vitae, sollicitudin non dui. Vestibulum in porttitor urna, ut posuere elit. Suspendisse mi magna, molestie nec aliquam id, porttitor in ante. Nullam posuere ipsum odio, at placerat ante eleifend vitae. Suspendisse vestibulum magna pretium velit venenatis venenatis. Donec dapibus, justo ut aliquam varius, quam tortor dignissim tellus, imperdiet scelerisque risus ex ac magna. Nunc sed purus nibh. Phasellus elit erat, scelerisque sed volutpat non, interdum vitae urna.</div>
 </div>


 <!-- tab 3 -->
 <h3 class="js-tabdrawer-drawer m-tabdrawer__drawer__heading font-helveticaBold" data-index="3">MATERIALS</h3>
 <div class="js-tabdrawer-content m-tabdrawer__content">
<div class="c-clothes__stats">
<div class="c-clothes__stats__item">
	<div class="c-clothes__stats__item__perc font-helvetica font-size-large">50%</div>
	<div class="c-clothes__stats__item__name font-georgia">cashmere</div>
</div>

<div class="c-clothes__stats__item">
	<div class="c-clothes__stats__item__perc font-helvetica font-size-large">46%</div>
	<div class="c-clothes__stats__item__name font-georgia">wool</div>
	</div>

<div class="c-clothes__stats__item">
	<div class="c-clothes__stats__item__perc font-helvetica font-size-large">4%</div>
	<div class="c-clothes__stats__item__name font-georgia">modal</div>
</div>

<div class="c-clothes__stats--hr"></div>
</div>
 <div class="c-clothes__copy font-helvetica">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nibh arcu, ultricies nec purus quis, consequat luctus orci. Sed non mi nisi. Donec vulputate erat odio, eget lacinia lectus accumsan sed. Phasellus diam lorem, ullamcorper quis velit a, ultricies facilisis turpis. Sed laoreet efficitur odio, ut consequat arcu iaculis non. Quisque lectus ligula, venenatis quis ullamcorper vitae, euismod in nisi. Sed sed arcu tortor. Phasellus a iaculis metus, sed suscipit dui. Nunc mollis, ipsum at tristique dignissim, enim mi sodales nulla, sed dapibus lorem tortor et nisi.</div>
</div>

</div>
</div>