Jump to content

On Click hide all elements except of the first 4


kayut

Recommended Posts

Hi,

In the following script, each time you click the button it shows 4 more elements:

Load 4 more elements

I need to change the script so that when all elements are visible and you click again the button, all elements get hidden except of the first 4 elements.

I tried for hours but couldn't find any solution. Could you please help me?

Thanks

Link to comment
Share on other sites

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Document Title</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

        <style type="text/css">
            body {
                background-color: #f6f6f6;
                width: 400px;
                margin: 20px auto;
                font: normal 13px/100% sans-serif;
                color: #444;
            }

            div {
                display: none;
                padding: 10px;
                border-width: 0 1px 1px 0;
                border-style: solid;
                border-color: #fff;
                box-shadow: 0 1px 1px #ccc;
                margin-bottom: 5px;
                background-color: #f1f1f1;
            }

            a,
            a:visited {
                color: #33739E;
                text-decoration: none;
                display: block;
                margin: 10px 0;
            }

            a:hover {
                text-decoration: none;
            }

            #loadLess {
                display: none;
            }

            #loadMore,
            #loadLess{
                padding: 10px;
                text-align: center;
                background-color: #33739E;
                color: #fff;
                border-width: 0 1px 1px 0;
                border-style: solid;
                border-color: #fff;
                box-shadow: 0 1px 1px #ccc;
                transition: all 600ms ease-in-out;
                -webkit-transition: all 600ms ease-in-out;
                -moz-transition: all 600ms ease-in-out;
                -o-transition: all 600ms ease-in-out;
            }

            #loadMore:hover {
                background-color: #fff;
                color: #33739E;
            }
        </style>
    </head>
    <body>
        <div>Content #1</div>
        <div>Content #2</div>
        <div>Content #3</div>
        <div>Content #4</div>
        <div>Content #5</div>
        <div>Content #6</div>
        <div>Content #7</div>
        <div>Content #8</div>
        <div>Content #9</div>
        <div>Content #10</div>
        <div>Content #11</div>
        <div>Content #12</div>

        <a href="#" id="loadMore">Load More</a>
        <!--<a href="#" id="loadLess">Load Less</a>-->

        <script type="text/javascript">
            $(function() {
                $("div").slice(0, 4).show();
                $(document).on('click', "#loadMore:not(.less)", function(e) {
                    e.preventDefault();

                    $("div:hidden").slice(0, 4).slideDown({
                    });

                    if ($("div:hidden").length === 0) {
                        $(this).fadeOut('slow', function() {
                            $(this).html('Load Less');
                            $(this).fadeIn('slow', function() {

                                $(this).addClass('less');

                            });
                        });
                    }
                    desiredHeight(0);
                });

                $(document).on('click', '#loadMore.less', function(e) {
                    e.preventDefault();

                    $('div:gt(3)').fadeOut();
                    $(this).html('Load More');
                    $(this).removeClass('less');
                    var DHeight = $(window).height();

                    desiredHeight(DHeight);

                });

                function desiredHeight(DHeight) {

                    var offsetElement = $('html,body');
                    $(offsetElement).animate({
                        scrollTop: $(offsetElement).offset().top + parseInt(DHeight)
                    }, 1500);
                }
            });
        </script>
    </body>
</html>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...