Question

This is my example.

<select name="mydropdownbox">
<option value="val1">val1</option>
<option value="val2">val2</option>
<option value="val3">val3</option>
<option value="val4">val4</option>
<option value="val5">val5</option>
<option value="val6">val6</option>
</select>​

as you can see, we have a select box with different options.
What i want to do is to hide option with val2 and val5, but add another option to the end of the list like <option value="more">more</option>.

By clicking “more” the hidden options should be shown. the option “more” should be replaced by an option “less”. By clicking less the options should be hidden again.

Please keep in mind that this is only an example. The full list contains more than 50 options. Would it be useful to some kind of array?

Unfortunately I have no idea how to start.
Any help on this would be greatly appreciated. Thanks.

UPDATE
Please have a look at my comments in the js-Part http://jsfiddle.net/bqyBQ/5/

Answer 1

I would try something like this

<select id="mydropdownbox" name="mydropdownbox">
    <option value="val1">val1</option>
    <option value="val2">val2</option>
    <option value="val3">val3</option>
    <option value="val4" class="hide">val4</option>
    <option value="val5" class="hide">val5</option>
    <option value="val6" class="hide">val6</option>
    <option value="more" class="more">more</option>
</select>​

<style type="text/css">
  .hide { display: none; }
</style>

<script type="text/javascript">
  jQuery('#mydropdownbox .more').click(function() { 
    jQuery('#mydropdownbox .hide').attr('class', 'show');
  });
</script>

Just put a new class to these elements, which should be hidden per default. Then add a click event to the more link to toggle these classes. It would be easy to make a less button with this technique too.