Jquery .toggle() with first element open

Question

So I am using .toggle() to open and close a bunch of divs, but I made the first div open on page load. The problem lies where, if a user click on that div to toggle it closed, it takes two clicks, the first click seems to try to toggle it open again. How should I handle this?

$(document).ready(function(){
    $('.content_accrd').css({"height":"0px"});
    $('.content_accrd:eq(0)').css({"height":"100px"});
    $('.paneltop:eq(0)').css({"background-position":"0px -21px"})
$('.paneltop').toggle( function() {
    $(this).css({"background-position":"0px -21px"})
    .siblings('.content_accrd').animate({"height":"100px"}, 200)
}, function() {
$(this).css({"background-position":"0px 0px"})
    .siblings('.content_accrd').animate({"height":"0px"}, 200);

})
})

markup:

 <div id="panel1" class="panel">
                <h2 class="panel_title">Capad Clients</h2>
                <div class="paneltop">
                </div>
              <div class="content_accrd">
              <p>
text
              </p>
              </div>
          </div>

          <div id="panel1" class="panel">
                <div class="paneltop">
                </div>
              <div class="content_accrd">
              <p>
              text
              </p>
              </div>
          </div>


          <div id="panel1" class="panel">
                <div class="paneltop">
                </div>
              <div class="content_accrd">
              <p>
text
              </p>
              </div>
          </div>

Joe · Accepted Answer · 2011-10-06 16:32:18Z

1

Example

EDIT:

$(document).ready(function() {
    $('.content_accrd').css({
        "height": "0px"
    });
    $('.content_accrd:eq(0)').css({
        "height": "100px"
    });
    $('.paneltop:eq(0)').css({
        "background-position": "0px -21px"
    })
    $('.paneltop').click(function() {
        if ($(this).siblings('.content_accrd').height() != 100) {
            $(this).css({
                "background-position": "0px -21px"
            }).siblings('.content_accrd').animate({
                "height": "100px"
            }, 200)
        } else {
            $(this).css({
                "background-position": "0px 0px"
            }).siblings('.content_accrd').animate({
                "height": "0px"
            }, 200);
        }
    })
})

edited Oct 6, 2011 at 16:32

answered Oct 6, 2011 at 15:55

Joe

82.8k18 gold badges130 silver badges147 bronze badges

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

3 Comments

A_funs Over a year ago

With this code, the problem seems to have migrated from the first open div to the other divs, now they need to be clicked on twice to activate

Joe Over a year ago

The edit I just posted checks and toggles based of the siblings height, since the toggle is too broad for multiple classes

A_funs Over a year ago

ok sweet, works perfectly and there are some useful techniques in there, thanks a lot!!!

Collectives™ on Stack Overflow

Jquery .toggle() with first element open

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related