Form Colour Selector

by shanejones

HTML

<div class="sample-selections">
  <input type="text" style="width:100%;">
</div>

<ul id="reset" class="sample-selection">
	<li><a href="" class="heading">Natural Aggregate</a>
    <div class="item-wrap">
		<ul id="reset" class="items">
			<li><a href="#" data-type="Butterscotch"><img src="http://sureset.dev-staging.xyz/wp-content/uploads/2018/09/5b4dcdb71df6d.jpg" alt=""> Butterscotch</a></li>
			<li><a href="#" data-type="Tuscan Barley Butter"><img src="http://sureset.dev-staging.xyz/wp-content/uploads/2018/09/5a96735a02456.jpg" alt=""> Tuscan Barley Butter</a></li>
			<li><a href="#" data-type="Cappuccino"><img src="http://sureset.dev-staging.xyz/wp-content/uploads/2018/09/5a9671e3f364e.jpg" alt=""> Cappuccino</a></li>
			<li><a href="#" data-type="Barley Butter"><img src="http://sureset.dev-staging.xyz/wp-content/uploads/2018/09/5a901d623a588.jpg" alt=""> Barley Butter</a></li>
			<li><a href="#" data-type="Milk Chocolate"><img src="http://sureset.dev-staging.xyz/wp-content/uploads/2018/09/5a958d4bb916b.jpg" alt=""> Milk Chocolate</a></li>
			<li><a href="#" data-type="Sterling"><img src="http://sureset.dev-staging.xyz/wp-content/uploads/2018/09/593a72795dda1.jpg" alt=""> Sterling</a></li>
			<li><a href="#" data-type="Tuscan Terracotta"><img src="http://sureset.dev-staging.xyz/wp-content/uploads/2018/09/59aebb26418a6.jpg" alt=""> Tuscan Terracotta</a></li>
			<li><a href="#" data-type="Bronze"><img src="http://sureset.dev-staging.xyz/wp-content/uploads/2018/09/593a72795e5e0.jpg" alt=""> Bronze</a></li>
			<li><a href="#" data-type="Midnight"><img src="http://sureset.dev-staging.xyz/wp-content/uploads/2018/09/593a72795e928.jpg" alt=""> Midnight</a></li>
			<li><a href="#" data-type="Golden Pearl"><img src="http://sureset.dev-staging.xyz/wp-content/uploads/2018/09/593e5d9cc150b.jpg" alt=""> Golden Pearl</a></li>
			<li><a href="#" data-type="Norwegian Pearl"><img src="http://sureset.dev-staging.xyz/wp-content/uploads/2018/09/593a727962fac.jpg" alt="">...

CSS

body .gform_wrapper div.gform_body ul.gform_fields li.gfield.gfield_html ul#reset li, body .gform_wrapper form div.gform_body ul.gform_fields li.gfield.gfield_html ul#reset li {  
  list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body .gform_wrapper div.gform_body ul.gform_fields li.gfield.gfield_html ul#reset, body .gform_wrapper form div.gform_body ul.gform_fields li.gfield.gfield_html ul#reset {  
  list-style-type: none !important;
    margin: 0.5rem !important;
    padding: 0 !important;
}
ul.sample-selection a.heading {
  padding: 0.5rem !important;
  display: block
} 
ul.sample-selection>li {
  padding: 10px;
  border-bottom: 1px solid #a52b3d;
  
}
ul.sample-selection .item-wrap {
  display: none;
}
ul.sample-selection .items {
  display: flex;
  flex-wrap: wrap;
}
ul.sample-selection .items li {
  width: 150px;
  box-sizing: border-box;
  text-align: center;
}
ul.sample-selection .items li a {
  display: block;
  padding: 0.5rem;
  margin: 0.5rem;
  height: 100%;
  border: 2px solid white;
}
ul.sample-selection .items li a.selected {
  border: 2px solid #a52b3d;
  border-radius: 10px;
 
}
ul.sample-selection .items img {
  display: block;
  max-width: 100%;
}

JavaScript

$('.sample-selection a.heading').click(function(e){
	e.preventDefault()
	$(this).parent().find('.item-wrap').slideToggle();
})

$('ul.items a').click(function(e){
	e.preventDefault()
	var removed = false;

  if( $(this).hasClass('selected') ){
    $(this).removeClass('selected');
    removed = true;
    
  }
  
  var total_selections = $('ul.items a.selected').length;
  
  if(total_selections <= 5){
  
  	if(!removed){
    
      if( ! $(this).hasClass('selected') ){
        $(this).addClass('selected');
      }
      
    }
    
    var selections = '';
 
    $('ul.items a.selected').each(function() {
      selections += $(this).attr('data-type') + ', '
    });
    
     $('.sample-selections input').val(selections);
  
  } else {
  	alert('You may only select 6');
  }
  

})