2

I am building a site in Drupal. I want to toggle the height of a div element between 100% and 200px. I have tried the toggle function but it is not supporting two callback functions(confused in this case).

I tried flags that will check the height of div tag and it will set the height as per the current height. Since, I have three div tags with same class and I want this toggle functionality in all three, so this idea also fails in this case.

Also, when the height is changed to 100% it happens without easing effect, when the height is changed to 200px the easing effect works.

4
  • Can you post your code / toggle function?
    – Nadh
    Apr 27, 2012 at 5:58
  • i simplified the above two codes for easy understanding. heres the actual code:jsfiddle.net/KLEbe/1 jsfiddle.net/Z4Z8D/5 Apr 27, 2012 at 6:39
  • try changing .css() to use .animate()
    – rkw
    Apr 27, 2012 at 6:41
  • @rkw could you please make yourself more clear? Apr 27, 2012 at 6:53

1 Answer 1

1

HTML :

<div class="target"> Hi </div>
<div class="target"> Hi 2</div>
<div class="target"> Hi 3</div>
<a href="#" id="button">Button</a>

CSS :

.target {
    width: 100px;

}
.someClass {
    background: #f00;
}

JQUERY:

$("#button").click(function(){
    $("div.target").toggleClass("someClass",100);
    return false;
});

If that's not good enough for you, check this one, with easing effects: http://jsfiddle.net/6FwUf/4/

EDIT: I've modified your code, try doing this :

$("a.artist-page-read-more").toggle(
     function() {
         $(this).parents("div.panel-pane").siblings("div.panel-pane.pane-entity-field").find("div.field-items").animate({height: "100%"}, "slow");
     },
    function(){
         $(this).parents("div.panel-pane").siblings("div.panel-pane.pane-entity-field").find("div.field-items").animate({height: "200px"}, "slow");
       }   
   ); 
1
  • Could you please setup a working example of your code on jsfiddle ? Because I don't understand why 2 functions are not working for you.
    – KBN
    Apr 27, 2012 at 7:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.