“See all your funds” button on dropdown list

https://stackoverflow.com/questions/45153233/i-want-to-create-a-see-all-your-funds-button-on-dropdown-list

by Craig Robertson

HTML

<select id="cd-dropdown" name="cd-dropdown" class="cd-select">
    <option value="-1" selected>Funds in your portfolio (3)</option>
    <option value="1">fund1 £60,000</option>
    <option value="2">fund 2 £40,000</option>
    <option value="3">fund 3 £24,000</option>
    <option value="4">View all funds &gt;</option>
    <option value="5">Fund 5 £40,000</option>
</select>

<input type="button" value="View all" class='view_more_button' />
<input type="button" value="View less" class='view_less_button hide' />

CSS

.hide {
    left: -9999px !important;
    position: absolute !important;
    visibility: hidden;
    z-index: -500;
    top: -9999px;
}

.cd-dropdown,
.cd-select {
  position: relative;
  width: 100%;
  margin: 20px auto;
  display: block;
  font-family: StandardLife-Light_Beta5, Arial, sans-serif;
}

.cd-dropdown > span {
  width: 100%;
  height: 60px;
  line-height: 60px;
  color: #087c89;
  font-weight: 700;
  font-size: 16px;
  background: #fff;
  display: block;
  padding: 0 50px 0 30px;
  position: relative;
  cursor: pointer;
}

.cd-dropdown > span:after {
  content: '\25BC';
  position: absolute;
  right: 0px;
  top: 15%;
  width: 50px;
  text-align: center;
  font-size: 12px;
  padding: 10px;
  /*height: 70%;*/
  line-height: 24px;
  border-left: 2px solid #ddd;
}

.cd-dropdown.cd-active > span:after {
  content: '\25B2';
}

.cd-dropdown ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: block;
  position: relative;
}

.cd-dropdown ul li {
  display: block;
}

.cd-dropdown ul li span {
  width: 100%;
  background: #fff;
  line-height: 60px;
  padding: 0 50px 0 30px;
  display: block;
  color: #36b0be;
  cursor: pointer;
  font-weight: 700;
}

.cd-dropdown > span,
.cd-dropdown ul li:nth-last-child(-n+3) span {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.cd-dropdown ul {
  position: absolute;
  top: 0px;
  width: 100%;
}

.cd-dropdown ul li {
  position: absolute;
  width: 100%;
}

.cd-active.cd-dropdown > span {
  color: #087c89;
}

.cd-active.cd-dropdown > span,
.cd-active.cd-dropdown ul li span {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.cd-active.cd-dropdown ul li span {
  -webkit-transition: all 0.2s linear 0s;
  -moz-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.cd-active.cd-dropdown ul li span:hover {
  background: #087c89;
  color: #fff;
}

JavaScript

//Create on DOM element dynamically that will house options greater than three.
var blank_input = $('<select>', {
    class: 'hidden_input_field hide',
    name: 'hidden_fields'
});

//This variable caches the master select element.
var master_select_menu = jQuery('#cd-dropdown');

//Put the blank select field in the DOM tree to be select via jQuery selectors.
blank_input.appendTo(jQuery('body'));

jQuery('.view_more_button').on('click', function(e) {
	var place_holder_select_field = jQuery('.hidden_input_field');
	if (place_holder_select_field.children('option').length) {
		jQuery('.moved').each(function(index,element) {
			jQuery(element).appendTo(master_select_menu);
		});
		jQuery(e.target).addClass('hide');
		jQuery('.view_less_button').removeClass('hide');
	}
	master_select_menu.val(-1).change();
});

jQuery('.view_less_button').on('click', function(e) {
	view_three();
	jQuery(e.target).addClass('hide');
	jQuery('.view_more_button').removeClass('hide');
	master_select_menu.val(-1).change();
});

view_three();

//This function gets called as soon as the page loads, where it appends any option element greater than 3 to the hidden select field.
function view_three() {
	jQuery('option').each(function(index, element) {
		var place_holder_select_field = jQuery('.hidden_input_field');
		if (index > 3) {
			jQuery(element).addClass('moved').appendTo(place_holder_select_field);
		}
	});
}