Making the following dynamic in jQuery

Question

I have a script that I have created in jQuery, which works how I would like it to, however I just know there will be a simpler, more dynamic way of doing the following.

I was wondering whether someone could help me out?

Ok, so my HTML structure is:

<div class="one_category category_list">
    <p>Option for 1 go here</p>
</div>

<div class="two_category category_list">
    <p>Option for 2 go here</p>
</div>

Please note, the above is duplicated ten times, with just the class name changing. I can easily change the markup if it would be easier to include numbers.

Then my jQuery, which can be condensed and made dynamic:

$(document).ready(function() {

    // Grid Layout - Number of Categories //

        var number_of_categories = $('.number_of_categories_list');
        if ( $(number_of_categories).val() == '1' ) {
            $('.one_category').show();
        } else if ( $(number_of_categories).val() == '2' ) {
            $('.one_category').show();
            $('.two_category').show();
        } else if ( $(number_of_categories).val() == '3' ) {
            $('.one_category').show();
            $('.two_category').show();
            $('.three_category').show();
        } else if ( $(number_of_categories).val() == '4' ) {
            $('.one_category').show();
            $('.two_category').show();
            $('.three_category').show();
            $('.four_category').show();
        } else if ( $(number_of_categories).val() == '5' ) {
            $('.one_category').show();
            $('.two_category').show();
            $('.three_category').show();
            $('.four_category').show();
            $('.five_category').show();
        } else if ( $(number_of_categories).val() == '6' ) {
            $('.one_category').show();
            $('.two_category').show();
            $('.three_category').show();
            $('.four_category').show();
            $('.five_category').show();
            $('.six_category').show();
        } else if ( $(number_of_categories).val() == '7' ) {
            $('.one_category').show();
            $('.two_category').show();
            $('.three_category').show();
            $('.four_category').show();
            $('.five_category').show();
            $('.six_category').show();
            $('.seven_category').show();
        } else if ( $(number_of_categories).val() == '8' ) {
            $('.one_category').show();
            $('.two_category').show();
            $('.three_category').show();
            $('.four_category').show();
            $('.five_category').show();
            $('.six_category').show();
            $('.seven_category').show();
            $('.eight_category').show();
        } else if ( $(number_of_categories).val() == '9' ) {
            $('.one_category').show();
            $('.two_category').show();
            $('.three_category').show();
            $('.four_category').show();
            $('.five_category').show();
            $('.six_category').show();
            $('.seven_category').show();
            $('.eight_category').show();
            $('.nine_category').show();
        } else if ( $(number_of_categories).val() == '10' ) {
            $('.one_category').show();
            $('.two_category').show();
            $('.three_category').show();
            $('.four_category').show();
            $('.five_category').show();
            $('.six_category').show();
            $('.seven_category').show();
            $('.eight_category').show();
            $('.nine_category').show();
            $('.ten_category').show();
        }


    $('.number_of_categories_list').change(function(){
        if ($(this).val() == '1') { 
            $('.one_category').slideDown();
        } else if ($(this).val() == '2') { 
            $('.one_category').slideDown();
            $('.two_category').slideDown();
        } else if ($(this).val() == '3') { 
            $('.one_category').slideDown();
            $('.two_category').slideDown();
            $('.three_category').slideDown();
        } else if ($(this).val() == '4') { 
            $('.one_category').slideDown();
            $('.two_category').slideDown();
            $('.three_category').slideDown();
            $('.four_category').slideDown();
        } else if ($(this).val() == '5') { 
            $('.one_category').slideDown();
            $('.two_category').slideDown();
            $('.three_category').slideDown();
            $('.four_category').slideDown();
            $('.five_category').slideDown();
        } else if ($(this).val() == '6') { 
            $('.one_category').slideDown();
            $('.two_category').slideDown();
            $('.three_category').slideDown();
            $('.four_category').slideDown();
            $('.five_category').slideDown();
            $('.six_category').slideDown();
        } else if ($(this).val() == '7') { 
            $('.one_category').slideDown();
            $('.two_category').slideDown();
            $('.three_category').slideDown();
            $('.four_category').slideDown();
            $('.five_category').slideDown();
            $('.six_category').slideDown();
            $('.seven_category').slideDown();
        } else if ($(this).val() == '8') {
            $('.one_category').slideDown();
            $('.two_category').slideDown();
            $('.three_category').slideDown();
            $('.four_category').slideDown();
            $('.five_category').slideDown();
            $('.six_category').slideDown();
            $('.seven_category').slideDown(); 
            $('.eight_category').slideDown();
        } else if ($(this).val() == '9') { 
            $('.one_category').slideDown();
            $('.two_category').slideDown();
            $('.three_category').slideDown();
            $('.four_category').slideDown();
            $('.five_category').slideDown();
            $('.six_category').slideDown();
            $('.seven_category').slideDown(); 
            $('.eight_category').slideDown();
            $('.nine_category').slideDown();
        } else if ($(this).val() == '10') { 
            $('.one_category').slideDown();
            $('.two_category').slideDown();
            $('.three_category').slideDown();
            $('.four_category').slideDown();
            $('.five_category').slideDown();
            $('.six_category').slideDown();
            $('.seven_category').slideDown(); 
            $('.eight_category').slideDown();
            $('.nine_category').slideDown();
            $('.ten_category').slideDown();
        } else { }
    });

});

Any ideas on how I can condense the jQuery elements?

Thanks for your help as always.

Answer 1

Hardly any code is needed. Just use your common class and slice the selection based on the selected value:

http://jsfiddle.net/TrueBlueAussie/4vxeuvhm/

$('.number_of_categories_list').change(function(){
    var count = $(this).val();
    var $lists = $('.category_list');    // All the lists
    var $show = $lists.slice(0,count);   // Just the ones we want to show
    var $hide = $lists.not($show);       // Everything that we do not want to show
    $show.slideDown();
    $hide.slideUp();
});
// trigger initial update
$('.number_of_categories_list').trigger("change");

I have intentionally left it unshortened further as this is intended as a readable example.

If you take it too far it becomes shorter but almost unreadable:

eg http://jsfiddle.net/TrueBlueAussie/4vxeuvhm/3/

var $lists = $('.category_list');
$lists.slice($('.number_of_categories_list').change(function () {
    var $show = $lists.slice(0, $(this).val()).slideDown();
    $lists.not($show).slideUp();
}).val()).hide();

Answer 2

Most likely it should be something like this:

// Grid Layout - Number of Categories //
var number_of_categories = $('.number_of_categories_list');
var categories_list = $('.categories_list');
categories_list.slice(0, number_of_categories.val()).show();

number_of_categories_list.change(function(){
    categories_list.slice(0, this.val()).slideDown();
});