javascript - Display number of colour swatch based on device -

on product list template page, i’ve got colour swatches show available colours product. on mobile want display first 2, , provide “more available” button takes through specific product page. on desktop want display first 4, , provide “more available” button takes through product page.

i can show , hide colours available on either viewport (with css), how variable logic work out when provide “more available” button on desktop , mobile?

html:

<!— product —> <div class=“product”>  <div class=“colour-swatches”>   <ul>     <li class=“swatch">red</li>     <l class=“swatch"i>blue</li>     <li class=“swatch">green</li>     <li class=“swatch">orange</li>     <li class=“swatch">yellow</li>     <li class=“swatch">black</li>     <li class=“swatch">lime</li>   </ul>  </div> </div> 

css:

li.swatch {    &:nth-child(-n+2) {       display: block !important;       visibility: visible !important;   }    @media (min-width: 600px) {        &:nth-child(-n+3) {           display: block !important;           visibility: visible !important;    }   } } 

you have available colors contained within list, right? (even ones aren't visible). if so, can count total number of colors available, , number of colors you're displaying. if available colors being displayed, don't show more available link, if not, show it.

you can use jquery's :visible selector find out how many of colors in list visible (on current viewport):

http://jsfiddle.net/cms8s720/

var = $('ul li').length,      visible = $('ul li:visible').length;    if(all - visible > 0) {      $('#avail').html( (all - visible) + ' more colors available');  }

/* simplified testing. should work css */  /* feel free experiment nth-child value in here */    li:nth-child(n+3) {      display: none;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="product">   <div class="colour-swatches">    <ul>      <li class="swatch">red</li>      <li class="swatch">blue</li>      <li class="swatch">green</li>      <li class="swatch">orange</li>      <li class="swatch">yellow</li>      <li class="swatch">black</li>      <li class="swatch">lime</li>    </ul>   </div>  </div>  <span id="avail"></span>