title: I want to create a "See all your funds" button on dropdown list
body: <p>I'm quite new to JS/JQuery web dev in general. </p>
  
  <p>For a work task I've been asked to come up with a solution where the first 3 funds in a list are shown and if they are invested in more than 3 then there will be a show all your funds button and once clicked it will toggle the rest of the funds.`</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
          &lt;html lang="en"&gt;
  
          &lt;head&gt;
              &lt;title&gt;Check your retirement plan demo&lt;/title&gt;
              &lt;meta charset="UTF-8" /&gt;
              &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
              &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
              &lt;link rel="stylesheet" type="text/css" href="css/dropdown-component.css" /&gt;
              &lt;script src="js/modernizr.custom.63321.js"&gt;&lt;/script&gt;
          &lt;/head&gt;
  
          &lt;body style="background-color:#eaeaea;"&gt;
  
              &lt;div class="container"&gt;
                  &lt;h2&gt; Dropdown Component&lt;/h2&gt;
  
                  &lt;!-- THIS BIT FUNDS START --&gt;
                  &lt;section class="main clearfix"&gt;
  
                      &lt;select id="cd-dropdown" name="cd-dropdown" class="cd-select"&gt;
                          &lt;option value="-1" selected&gt;Funds in your portfolio (3)&lt;/option&gt;
                          &lt;option value="1"&gt;fund1 £60,000&lt;/option&gt;
                          &lt;option value="2"&gt;fund 2 £40,000&lt;/option&gt;
                          &lt;option value="3"&gt;fund 3 £24,000&lt;/option&gt;
                          &lt;option value="4"&gt;View all funds &amp;gt;&lt;/option&gt;
                          &lt;option value="5"&gt;Fund 5 £40,000&lt;/option&gt;
  
                      &lt;/select&gt;
  
                  &lt;/section&gt;
                  &lt;!-- THIS BIT FUNDS END --&gt;
  
              &lt;/div&gt;
  
              &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
              &lt;script type="text/javascript" src="js/jquery.dropdown.js"&gt;&lt;/script&gt;
              &lt;script type="text/javascript"&gt;
                  $(function () {
  
                      $('#cd-dropdown').dropdown({
                          gutter: 5
                      });
  
                  });
  
                      &lt;/script&gt;
  
          &lt;/body&gt;
  
          &lt;/html&gt;`
  </code></pre>
  
  <p>I'm using jquery dropdown solution to help me with the funds its not got the functionality to hide the funds greater than 3 and toggle them once the see more funds is clicked.</p>
  
  <pre><code> /**
       * jquery.dropdown.js v1.0.0
       * http://www.codrops.com
       *
       * Licensed under the MIT license.
       * http://www.opensource.org/licenses/mit-license.php
       *
       * Copyright 2012, Codrops
       * http://www.codrops.com
       */
      ; (function ($, window, undefined) {
  
          'use strict';
  
          $.DropDown = function (options, element) {
              this.$el = $(element);
              this._init(options);
          };
  
          // the options
          $.DropDown.defaults = {
              speed: 300,
              easing: 'ease',
              gutter: 0,
              // initial stack effect
              stack: true,
              // delay between each option animation
              delay: 0,
              // random angle and positions for the options
              random: false,
              // rotated [right||left||false] : the options will be rotated to thr right side or left side.
              // make sure to tune the transform origin in the stylesheet
              rotated: false,
              // effect to slide in the options. value is the margin to start with
              slidingIn: false,
              onOptionSelect: function (opt) { return false; }
          };
  
          $.DropDown.prototype = {
  
              _init: function (options) {
  
                  // options
                  this.options = $.extend(true, {}, $.DropDown.defaults, options);
                  this._layout();
                  this._initEvents();
  
              },
              _layout: function () {
  
                  var self = this;
                  this.minZIndex = 1000;
                  var value = this._transformSelect();
                  this.opts = this.listopts.children('li');
                  this.optsCount = this.opts.length;
                  this.size = { width: this.dd.width(), height: this.dd.height() };
  
                  var elName = this.$el.attr('name'), elId = this.$el.attr('id'),
                      inputName = elName !== undefined ? elName : elId !== undefined ? elId : 'cd-dropdown-' + (new Date()).getTime();
  
                  this.inputEl = $('&lt;input type="hidden" name="' + inputName + '" value="' + value + '"&gt;&lt;/input&gt;').insertAfter(this.selectlabel);
  
                  this.selectlabel.css('z-index', this.minZIndex + this.optsCount);
                  this._positionOpts();
                  if (Modernizr.csstransitions) {
                      setTimeout(function () { self.opts.css('transition', 'all ' + self.options.speed + 'ms ' + self.options.easing); }, 25);
                  }
  
              },
              _transformSelect: function () {
  
                  var optshtml = '', selectlabel = '', value = -1;
                  this.$el.children('option').each(function () {
  
                      var $this = $(this),
                          val = isNaN($this.attr('value')) ? $this.attr('value') : Number($this.attr('value')),
                          classes = $this.attr('class'),
                          selected = $this.attr('selected'),
                          label = $this.text();
  
                      if (val !== -1) {
                          optshtml +=
                              classes !== undefined ?
                                  '&lt;li data-value="' + val + '"id=fundID' + val + '&gt;&lt;span class="' + classes + '"&gt;' + label + '&lt;/span&gt;&lt;/li&gt;' :
                                  '&lt;li data-value="' + val + '"id=fundID' + val + '&gt;&lt;span&gt;' + label + '&lt;/span&gt;&lt;/li&gt;';
                      }
  
                      if (val &gt; 3) {}
  
                      if (selected) {
                          selectlabel = label;
                          value = val;
                      }
  
                  });
  
                  this.listopts = $('&lt;ul/&gt;').append(optshtml);
                  this.selectlabel = $('&lt;span/&gt;').append(selectlabel);
                  this.dd = $('&lt;div class="cd-dropdown"/&gt;').append(this.selectlabel, this.listopts).insertAfter(this.$el);
                  this.$el.remove();
  
                  return value;
  
              },
              _positionOpts: function (anim) {
  
                  var self = this;
  
                  this.listopts.css('height', 'auto');
                  this.opts
                      .each(function (i) {
                          $(this).css({
                              zIndex: self.minZIndex + self.optsCount - 1 - i,
                              top: self.options.slidingIn ? (i + 1) * (self.size.height + self.options.gutter) : 0,
                              left: 0,
                              marginLeft: self.options.slidingIn ? i % 2 === 0 ? self.options.slidingIn : - self.options.slidingIn : 0,
                              opacity: self.options.slidingIn ? 0 : 1,
                              transform: 'none'
                          });
                      });
  
                  if (!this.options.slidingIn) {
                      this.opts
                          .eq(this.optsCount - 1)
                          .css({ top: this.options.stack ? 9 : 0, left: this.options.stack ? 4 : 0, width: this.options.stack ? this.size.width - 8 : this.size.width, transform: 'none' })
                          .end()
                          .eq(this.optsCount - 2)
                          .css({ top: this.options.stack ? 6 : 0, left: this.options.stack ? 2 : 0, width: this.options.stack ? this.size.width - 4 : this.size.width, transform: 'none' })
                          .end()
                          .eq(this.optsCount - 3)
                          .css({ top: this.options.stack ? 3 : 0, left: 0, transform: 'none' });
                  }
  
              },
              _initEvents: function () {
  
                  var self = this;
  
                  this.selectlabel.on('mousedown.dropdown', function (event) {
                      self.opened ? self.close() : self.open();
                      return false;
  
                  });
  
                  this.opts.on('click.dropdown', function () {
                      if (self.opened) {
                          var opt = $(this);
                          self.options.onOptionSelect(opt);
                          self.inputEl.val(opt.data('value'));
                          self.selectlabel.html(opt.html());
                          self.close();
                      }
                  });
  
              },
              open: function () {
                  var self = this;
                  this.dd.toggleClass('cd-active');
                  this.listopts.css('height', (this.optsCount + 1) * (this.size.height + this.options.gutter));
                  this.opts.each(function (i) {
  
                      $(this).css({
                          opacity: 1,
                          top: self.options.rotated ? self.size.height + self.options.gutter : (i + 1) * (self.size.height + self.options.gutter),
                          left: self.options.random ? Math.floor(Math.random() * 11 - 5) : 0,
                          width: self.size.width,
                          marginLeft: 0,
                          transform: self.options.random ?
                              'rotate(' + Math.floor(Math.random() * 11 - 5) + 'deg)' :
                              self.options.rotated ?
                                  self.options.rotated === 'right' ?
                                      'rotate(-' + (i * 5) + 'deg)' :
                                      'rotate(' + (i * 5) + 'deg)'
                                  : 'none',
                          transitionDelay: self.options.delay &amp;&amp; Modernizr.csstransitions ? self.options.slidingIn ? (i * self.options.delay) + 'ms' : ((self.optsCount - 1 - i) * self.options.delay) + 'ms' : 0
                      });
  
                  });
                  this.opened = true;
  
              },
              close: function () {
  
                  var self = this;
                  this.dd.toggleClass('cd-active');
                  if (this.options.delay &amp;&amp; Modernizr.csstransitions) {
                      this.opts.each(function (i) {
                          $(this).css({ 'transition-delay': self.options.slidingIn ? ((self.optsCount - 1 - i) * self.options.delay) + 'ms' : (i * self.options.delay) + 'ms' });
                      });
                  }
                  this._positionOpts(true);
                  this.opened = false;
  
              }
  
          }
  
          $.fn.dropdown = function (options) {
              var instance = $.data(this, 'dropdown');
              if (typeof options === 'string') {
                  var args = Array.prototype.slice.call(arguments, 1);
                  this.each(function () {
                      instance[options].apply(instance, args);
                  });
              }
              else {
                  this.each(function () {
                      instance ? instance._init() : instance = $.data(this, 'dropdown', new $.DropDown(options, this));
                  });
              }
              return instance;
          };
  
      })(jQuery, window);'
  </code></pre>
  
  <p>Can anybody help me to either come up with a quick solution or point me in the correct direction? Thanks</p>