Changing button value based on toggle

Question

What I want to do is to make the button value to be "1" if the section opened by pressing it is visible, and make it show "2" if the section is not visible. (visible/not visible - hidden/visible).

Here is my failed attempt that I think got the closest to the truth:

    $(document).ready(function(){
    $(".doc1").hide();
    $(".doc").click(function(){
        $(".doc1").slideToggle("fast");

        if($('.doc1').is(':visible')) {
            document.getElementById('doc').value = '1';
        }
        else
            document.getElementById('doc').value = '2';
    });
});

The value is stuck on "2" whether the section is opened (visible) or hidden (.hide).

Can you post the HTML layout too? First you use "doc" as a class name $(".doc") and then as an element id document.getElementById('doc'). That seems wrong. — Toni Toni Chopper
– Toni Toni Chopper, Commented Nov 30, 2012 at 15:26

Explosion Pills · Accepted Answer · 2012-11-30 15:29:55Z

3

There are a couple things. First you have $(".doc").click. Do you mean $("#doc").click?

Secondly, if you start the animation before you check :visible, it will always be considered visible. You either need to make the value change the callback of the slideToggle call, or just reverse the assignment order and do slideToggle afterwards:

http://jsfiddle.net/95nKw/

answered Nov 30, 2012 at 15:29

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

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

Comments

Akhil Sekharan · Accepted Answer · 2012-11-30 15:29:01Z

2

According to jquery documentation:

During animations that hide an element, the element is considered to be visible until the end of the animation. During animations to show an element, the element is considered to be visible at the start at the animation.

May be you should wait until the animation is completed

$(".doc").click(function(){
    $(".doc1").slideToggle("fast", function(){
        if($('.doc1').is(':visible')) {
            document.getElementById('doc').value = '1';
        }
        else
            document.getElementById('doc').value = '2';     
    });
});

answered Nov 30, 2012 at 15:29

Akhil Sekharan

12.7k8 gold badges43 silver badges58 bronze badges

Comments

Mike Bonds · Accepted Answer · 2012-11-30 15:31:20Z

1

If you are going to use jquery, continue to use it through out. Makes it much easier to go back and fix/read.

Below might be what you are looking for.

$(document).ready(function(){
    $(".doc1").hide();
    $(".doc").click(function(){
        $(".doc1").slideToggle("fast", function() {
           if($(this).is(':visible')) {
              $('#doc').val('1');
           } else {
              $('#doc').val('2');
           }
        });
    });
});

answered Nov 30, 2012 at 15:31

Mike Bonds

1,04010 silver badges16 bronze badges

1 Comment

Jack Over a year ago

This works as well, and this is what I'm going to use due to the reasons you mentioned.

Erik Klop · Accepted Answer · 2012-11-30 15:30:21Z

0

Not tested, but i would try something like this:

$(document).ready(function(){
    $(".doc1").hide();
    $(".doc").click(function(){
        $(".doc1").slideToggle("fast");

        if($('.doc1').is(':visible')) {

             $(".doc").val("1");  //or .val(1);
        }
        else
             $(".doc").val("2");
    });
});

answered Nov 30, 2012 at 15:30

Erik Klop

1351 gold badge1 silver badge6 bronze badges

3 Comments

Mike Bonds Over a year ago

Try to ensure that what you are posting will work. What you have posted is nearly identical to the original question.

Erik Klop Over a year ago

$(".doc").val("1"); is not identical to document.getElementById('doc').value = '1';

Mike Bonds Over a year ago

What you have is nearly identical, and will still not work. Also, you are attempting to get an element by class and change its value. The original is trying to get an element by id and change its value. Also, you if else structure will not work.

Collectives™ on Stack Overflow

Changing button value based on toggle

4 Answers 4

Comments

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related