Hide/Show if Count is Greater Than 5

Question

I am working in a WordPress theme and found a problem that I am a bit confused on. I am showing a list of offices in different cities. This is a custom taxonomy and I am using the following code to display a unordered list of terms.

$wpz_offices = get_the_term_list( $post->ID, 'office', '<li>', '</li><li>', '</li>');
echo $wpz_offices;

And it display exactly how it should but the problem is I would like to add a javascript toggle if the <li> exceeds 5 . I do not know enough about JavaScript to implement this so this is why I am asking for help. Is this possible using the available markup?

So basically if the <ul> for the taxonomy has 4 or less terms then show normally

• a
• b
• c
• d

But if we have 5 terms show this

To see all offices Click here

Any help would be appreciated.

Update For those curious here is how I used the help from the answers http://jsfiddle.net/KQBKu/

Answer 1

Demo http://jsfiddle.net/yGt4y/

This should give you good idea. :)

API: http://api.jquery.com/slideToggle/

Code

$(document).ready(function () {

    if ($('ul > li').length > 3) {
        $('#click').show();
        $('ul').hide();
    }

    $('#click').click(function () {
        $('ul').slideToggle();
    });
});

Answer 2

you should try this code

Demo Fiddle

var list = $('ul').children().size();

if(list > 4){
    $('ul').children().hide().slice(0,4).show();
    var span = $('<span>').html('show more');
    $(span).toggle(function(){
        $('ul').children().show();
        $(span).html('show less');
    }, function(){
        $(span).html('show more');
        $('ul').children().hide().slice(0,4).show();
    });
    $('ul').after(span);
}