jQuery if something is more than value then hide and add a button to show whats hidden?

Question

Hi guys!

Exactly what my title says is the problem Im having right now.

Im checking a div for how many links php printed and if there is more than 10 Id like to hide them and add a button that says read more and then it show the rest of the links.

        $(document).ready(function() {

     var newsRss = $('#rssNews >li').length;
     var driftRss = $('#rssDrift >li').length;

        $(window).load(function() {
            if(newsRss > 10)
     alert(newsRss);

});

    });

this is how far I got with the code.

Ill be happy to hear every tip and trick you guys can help me with!

Best Regards,

Charlie

Answer 1

$('#rssNews >li').slice(10).addClass("hidemore").hide();
if ($(".hidemore").length > 0) {
  //add your button to the dom here, 
  //and in its click event put:
  // $(".hidemore").show();
}

Answer 2

You could do something fairly straightforward like this:

$(function() {
    $("#rssNews, #rssDrift").each(function() {
        if($(this).children(":gt(4)").hide().length)
            $(this).append("<li class='showAll'>Show All</li>");
    });
    $(".showAll").live('click', function() {
        $(this).siblings().slideDown();
        $(this).remove();
    });
});​

This hides any children over index 4, meaning it only shows 5 at once. If it hid any, it adds a "Show All" link...clicking this shows the hidden ones and removes the "Show All" link itself.

You can test how this works here: http://jsfiddle.net/hxrde/

Answer 3

Hi again!

I really need to ask if this is correctly written:

$(function() {
    $("#rssNews, #rssDrift").each(function() {
        if($(this).children(":gt(4)").hide().length)
            $(this).append("<a class='showAll'>Show more</a>");

    });

    $(".showAll").live('click', function() {
        $(this).siblings().slideDown();
        $(this).parent(0).append("<a class='hideAll'>Hide</a>");
        $(this).remove();
    });

    $(".hideAll").live('click', function() {
        $(this).siblings().slideUp();
        $(this).parent(0).append("<a class='showAll'>Show all</a>");
        $(this).remove();
    });

});

The thing Im doing here is only show the five first RSS flows, and If there is more than 5 hide them and add a Show more text, then if you click that it shows all the RSS flows, then a Hide text appears to hide all RSS Flows.

Working example here:

http://jsfiddle.net/s3BnK/

And yes Im a noob, and I love to learn how jQuery works, I´m trying the best I can :)

Best Regards,

Charlie

Answer 4

Charlie,

Simply add the ":gt(4)" to the hideAll function for the siblings:

 $(".hideAll").live('click', function() {
    $(this).siblings(":gt(4)").slideUp();
    $(this).parent(0).append("<a class='showAll'>Show all</a>");
    $(this).remove();
});

And thanks for the code. Works great!