Show and Hide functions using Jquery

Question

I am new for jquery, Here is my code:

<script type="text/javascript">
            $(document).ready(function () {
                $('.toAdd').hide();

                var count = 0;
                $('#add').on('click', function () {
                    $('.toAdd:eq(' + count + ')').show();
                    count++;
                });
            });

</script>
<div class="toAdd">One</div><div class="toAdd">Two</div><div class="toAdd">Three</div>
<input type="button" value="show" id="add"/>
<input type="button" value="hide" id="sub"/>

In this code if i click show button the divisions one by one it showing. after that i need to hide one by one if i click hide button

Fiddle here

$(document).ready(function () { $('.toAdd').show(); var count > 0; $('#sub').on('click', function () { $('.toAdd:eq(' + count + ')').hide(); count--; }); }); like that i tried but its not working — user2869777
– user2869777, Commented Oct 11, 2013 at 6:11

Marikkani Chelladurai · Accepted Answer · 2013-10-11 06:15:47Z

5

$(document).ready(function () {
    $('.toAdd').hide();

    var count = 0;
    $('#add').on('click', function () {
        $('.toAdd:eq(' + count + ')').show();
        count++;
    });
    var deCount = count;
    $('#sub').on('click', function () {
        count--;
        $('.toAdd:eq(' + count + ')').hide();
    });
});

answered Oct 11, 2013 at 6:15

Marikkani Chelladurai

1,4301 gold badge13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nibin · Accepted Answer · 2013-10-11 06:10:52Z

4

Hope this might help you... :)

                 $('#sub').on('click', function () {
                        if(count > 0){
                           count--;
                        $('.toAdd:eq(' + count + ')').hide();
                        }

                    });

answered Oct 11, 2013 at 6:10

Nibin

3,9502 gold badges22 silver badges40 bronze badges

2 Comments

user2869777 Over a year ago

Nibin Over a year ago

please do check the value of the counts.I have edited the code,so that the count variable is decremented only if the value is greater than 0

AxelPAL · Accepted Answer · 2013-10-11 06:22:25Z

2

Edited jsfiddle by Outlooker

if($('.toAdd:eq(' + count + ')').is('*'))

Added check of item existance.

Fiddle

edited Oct 11, 2013 at 6:22

answered Oct 11, 2013 at 6:17

AxelPAL

1,0273 gold badges12 silver badges19 bronze badges

Comments

Gowri · Accepted Answer · 2013-10-11 06:23:27Z

2

Try this too

<script type="text/javascript">
            $(document).ready(function () {
                $('.toAdd').hide();

                $('#add').on('click', function () {
                    $('.toAdd,.hidden').first().show().addClass( "shown" ).removeClass( "hidden" );
                });
                $('#sub').on('click', function () {
                    $('.toAdd,.shown').last().hide().addClass( "hidden" ).removeClass( "shown" );
                });
            });

edited Oct 11, 2013 at 6:23

Gowri

16.9k27 gold badges103 silver badges162 bronze badges

answered Oct 11, 2013 at 6:13

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

2 Comments

Gowri Over a year ago

Are you aware of jquery chaining

gurvinder372 Over a year ago

@gowri I wasn't. But now I am. Thanks

Rahul J. Rane · Accepted Answer · 2013-10-11 07:38:54Z

The answer of Outlooker is right but have some little bit error. when user will click on show button 4th time then your hide doesn't work as expected. So I just fix the chunk here and sharing with you guys.

Html Code:

<div class="toAdd">One</div>
<div class="toAdd">Two</div>
<div class="toAdd">Three</div>
<input type="button" value="show" id="add" />
<input type="button" value="hide" id="sub" />

Java Script Code:

/**
 * Hide all Content div
 */
$(".toAdd").hide();
/**
 * Total no of content div find out
 **/
var lengthDiv = $(".toAdd").length;
/**
 * Default count declare
 **/
var count = 0;
/**
 * Click on show button
 **/
$('#add').on('click', function () {
    if (count < lengthDiv) {
        $('.toAdd:eq(' + count + ')').show();
        count++;
    }
});
/**
 * Click on hide button
 **/
$('#sub').on('click', function () {
    if (count > 0) {
        count--;
        $('.toAdd:eq(' + count + ')').hide();
    }
});

Fiddle Example

S. S. Rawat · Accepted Answer · 2013-10-11 06:15:15Z

1

Try this this will work you very fine

    $('.toAdd').hide();
    $('#add').click(function(){
    $('div').each(function(key, value) {

            $(value).delay(key * 500).fadeIn(500);

        });});
        $('#sub').click(function(){
        $('div').each(function(key, value) {

            $(value).delay(key * 500).fadeOut(500);

        });
});

Fiddle Here

answered Oct 11, 2013 at 6:15

S. S. Rawat

6,1414 gold badges45 silver badges59 bronze badges

Comments

Arun P Johny · Accepted Answer · 2013-10-11 06:17:51Z

1

Try

var $toAdds = $('.toAdd').hide();

var count = 0;
$('#add').on('click', function () {
    if (count < $toAdds.length) {
        $toAdds.eq(count).show();
        count++;
    }
});
$('#sub').on('click', function () {
    if (count > 0) {
        count--;
        $toAdds.eq(count).hide();
    }    
});

Demo: Fiddle

answered Oct 11, 2013 at 6:17

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Collectives™ on Stack Overflow

Show and Hide functions using Jquery

7 Answers 7

Comments

2 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

2 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related