CODEWITHSUNDEEP
javascriptjqueryhtmlcss
UserAyeJay
UserAyeJay

Reputation: 69

Display & Hide Divs Sequentially on click

Basics: I have a webpage which loads several content divs to a page, then shows them sequentially when the user clicks on the "load more" link.

Example here: JSFiddle Example

$("#load-more").click(function(e) {

    var t = $(this);
    if (t.data('disabled')){
        return;
    }

    var hiddenGroups = $('.group:not(:visible)');
    if (hiddenGroups.length > 0){
        hiddenGroups.first().show();
    } else{
        t.data('disabled', true);
    }
});

I have two questions based on this example:

1) The "load more" link should hide its self when the final div is showing, but is not functioning correctly in my example.

however, I'd really like it to:

2) Hide the "load more" div, and instead show/change the functionality to "Hide Items" and hide the content divs in reverse order upon click.

Upvotes: 1

Views: 388

Answers (2)

DannyTheDev
DannyTheDev

Reputation: 4173

This is how I would do it:

JSFIDDLE

The idea:

Set a variable instructing if you are toggling more or less

var load = 'more';

check if we are loading more or less

and a function to switch the direction and the button text, to stop copy/pasting the same javascript.

Although there are only two things happening in the function, i'm working on the assumption this might grow as your application grows - if this was not to grow then it may be worth getting rid of the function andjust adding the code with the rest

The full snippet:

var load = 'more';

$("#load-more").on('click',function (e) {
    // show the next hidden div.group, then disable load more once all divs have been displayed


    // if we are loading more
    if (load == 'more') {

        // get the amount of hidden groups
        var groups = $('.group:not(:visible)');

        // if there are some available
        if (groups.length > 0) {
            // show the first
            groups.first().show();

            // if that was the last group then set to load less
            if (groups.length == 1) {
                switchLoadTo('less');
            }
        }
    // we are loading less
    } else {
        // get the groups which are currently visible
        var groups = $('.group:visible');

        // if there is more than 1 (as we dont want to hide the initial group)
        if (groups.length > 1) {

            // hide the last avaiable
            groups.last().hide();
            // if that was the only group available, set to load more
            if (groups.length == 2) {
                switchLoadTo('more');
            }
        }
    }
});

function switchLoadTo(dir) {
    load = dir;
    $("#load-more").html('Load ' + dir);
}

Upvotes: 1

Jason
Jason

Reputation: 4159

http://jsfiddle.net/8Re3t/20/

See snippet below. Probably not the most optimized code, but you get the idea and can optimize it on implementation.

var load = true;

$("#load-more").click(function(e) {
    // show the next hidden div.group, then disable load more once all divs have been displayed
    var t = $(this);
    if (t.data('disabled')){
        return;
    }

    var hiddenGroups = $('.group:not(:visible)');

    if(load) {
        hiddenGroups.first().show();
    } else {
        $('.group:visible').last().hide();
    }

    if (hiddenGroups.length > 1){
        jQuery("#load-more").html("Load");
        load = true;
    } else {
        jQuery("#load-more").html("Hide");
        load = false;
    }
});

Upvotes: 1

Related Questions