CODEWITHSUNDEEP
jqueryhtml
Maggy Tanky
Maggy Tanky

Reputation: 13

show/hide divs jQuery

I want to have 4-8 "hidden" divs on a page. Then also have 2 Buttons, one "plus" and one "remove". When I click the "plus" button it shows the 1st div, and if I click the "plus" button again it shows div nr 2. And if i use "remove" it removes the div.

Do I have to use conditional statements or is there any simple solution to this?

 $(document).ready(function() {
 $('#show').click(function () {
    $("#hiddencontent").fadeIn("slow");
  });
});

Upvotes: 1

Views: 383

Answers (7)

Sushanth --
Sushanth --

Reputation: 55740

Check this

var index = -1;
var max = $('.container > div').length;
$('#show').on('click', function() {
    if (index + 1 > max) {
        // Do Nothing
    } else {
        if (index < max - 1) {
            index++;
            $('.container > div:eq(' + index + ')').show();
        }


    }
});

$('#hide').on('click', function() {
    if (index == -1) {
        index = 0;
    }
    else {
        if ($('.container > div:eq(' + index + ')').is(':visible')) {
            $('.container > div:eq(' + index + ')').hide();
            index--;
        }
    }
});​

Check Fiddle

Upvotes: 0

psantiago
psantiago

Reputation: 714

You can probably try something like

$("div:hidden").first().show();

and

$("div:visible").last().hide();

Upvotes: 3

Anoop
Anoop

Reputation: 23208

Following code will show first div with display none.

    $(document).ready(function() {   
        $('#show').click(function () {       
            $("div").filter(function() { 
                 return $(this).css("display") == "none" 
            }).first().show();
        });

Hide last shown div.

      $('#remove').click(function () {  
            $("div").filter(function() { 
                 return $(this).css("display") !== "none" 
            }).last().hide();
        });
    });

Upvotes: 2

Matt Burland
Matt Burland

Reputation: 45135

Here's a simple fiddle using a class of .hidden (bad name) for the elements that will be hidden, revealed and hidden again. Then I use the :hidden and :visible selectors.

$("#add").click(function() {
    $(".hidden:hidden").first().show();
});

$("#remove").click(function() {
    $(".hidden:visible").last().hide();
});

Upvotes: 0

Rene Koch
Rene Koch

Reputation: 1291

http://jsfiddle.net/z9s8T/

CSS

div{
    display:none;
}
div.show{
    display:block;
}
​

HTML

<button id="show">show</button>
<button id="hide">hide</button>

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

JS

$(function(){
    $('#show').click(function(){
        $('div:not(.show):eq(0)').addClass('show');
    });
    $('#hide').click(function(){
        $('div.show:last').removeClass('show');
    }); 
});​

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150010

Give your divs a common class for ease of selection and then you can do this:

var $divs = $(".hideShow").hide(); // cache a reference to the relevant divs,
                                   // and start with them hidden
$("#show").click(function() {
    $divs.filter(":hidden").first().fadeIn();
});
$("#hide").click(function() {
    $divs.not(":hidden").last().fadeOut();
});​

Demo: http://jsfiddle.net/ua9ef/2/

The :hidden selector lets you manipulate just the hidden ones, or just the .not() hidden ones. (Or of course you could make use of the :visible selector...)

Upvotes: 2

Ohgodwhy
Ohgodwhy

Reputation: 50767

ID's are unique, you cannot reuse them over and over, change id="hiddencontent" to class="hiddencontent" then follow the below.

Demo jsFiddle

$(document).ready(function() {
    var index = 0;
    $('#show').click(function () {
        $('div').eq(index).fadeIn('slow');
        if(index < $('div').length){
            index++;
        }else{
            alert('There is no more hidden content!');
        }
    });
    $('#remove').click(function(){
        $('div').eq(index -1).remove();
    });
});​

jQuery's .eq() has a zero based index. We set a variable outside of the click function, but still available to the scope of the click, and we toggle the hiddencontent sequentially. When we click, it will change the index from 0 > 1 > 2 > 3 and so on. We check to see if the index is less than the current number of elements matching the class hiddencontent and if it passes, we iterate the index to the next integer.

The remove function doesn't need to change the iterator, as it only wants to remove the last indexed item (as far as I can tell based on your scenario).

This should do.

Upvotes: 0

Related Questions