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 /

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/KQBKu/

• javascript
• php
• jquery
• html
• wordpress

• check updated code do you need this? – Pragnesh Chauhan Commented Oct 23, 2013 at 3:48

2 Answers 2

Demo http://jsfiddle/yGt4y/

This should give you good idea. :)

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

Code

$(document).ready(function () {

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

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

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);
}