CODEWITHSUNDEEP
jqueryhtml
Evolutio
Evolutio

Reputation: 974

jQuery how to show the next div

I don't know how I can show the next div (.hide) when the Clickbox is clicked.

link to the demo: http://jsfiddle.net/fvuqW/

this is my jQuery code:

        $(function(){
            $('.form input[type=checkbox]').each(function() 
                {
                $(this).change(function()
                    {
                    if($(this).is(':checked'))
                        {
                        $(this).next('div.hide').css('display', 'block');
                        }
                    else 
                        {
                        $(this).next('div.hide').css('display', 'block');
                        }
                    });
                });
        });

Upvotes: 0

Views: 96

Answers (7)

Unknown User
Unknown User

Reputation: 3668

Use this function :

$(document).ready(function() {
        $('input[type=checkbox]').change(function() {
          $('.hide').toggle();
       });
    });

You can even add transitions to it. Like fadeIn or fadeOut or anything else with jQueryUI.

More info : jQuery UI - EFfects

Upvotes: 1

Amit
Amit

Reputation: 15387

Try this

$(function(){
    $('input[type=checkbox]').change(function() {
        $(this).closest('div').siblings("div").toggleClass('hide');
    });
});

Demo

Upvotes: 1

Harika Choudary Kanikanti
Harika Choudary Kanikanti

Reputation: 757

This will help you

    $(document).ready(function() {

       $('#checkbox').change(function() {
          if($(this).is(":checked")) {
             // do something...
       }
     else{
           //do something...
       }  

    });
});

Take a look at this demo JSFiddle

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128791

The .hide divider isn't anywhere near your input. You need to first find the containing divider of your input element, then call .next(). I've condensed your code down to just:

$('input[type=checkbox]').change(function() {
    $(this) /* The checkbox */
        .closest('div') /* The input's ancestor divider (".form_checkboxes"). */
        .next() /* The divider next to the ancestor divider. */
        .toggleClass('hide') /* Toggle the class "hide". */
    ;
});

JSFiddle demo.

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

It can be as simple as

$(function () {
    $('input[type=checkbox]').change(function () {
        $(this).closest('.checkbox').find('.hide').toggle(this.checked)
    }).filter(':checked').change();
});

Demo: Fiddle

Upvotes: 0

Satyam Saxena
Satyam Saxena

Reputation: 571

Do like this:

$(this).closest('.hide').nextAll('.hide').eq(0).show();

Upvotes: 0

Tats_innit
Tats_innit

Reputation: 34107

Working demo http://jsfiddle.net/wjkEy/

I have made small changes in your provided JS code display:none in the else code, you could simply use .show or .hide.

This should fit your need :)

Code

$(function () {
    $('input[type=checkbox]').each(function () {
        $(this).change(function () {
            if ($(this).is(':checked')) {
                $(this).parents('.checkbox').find('.hide').css('display', 'block');
            } else {
                $(this).parents('.checkbox').find('.hide').css('display', 'none');
            }
        });
    });
});

Upvotes: 1

Related Questions