How do I add .animate to my html?

Question

I have this html

 <div class = "theListItem" data-role="collapsible-set" data-collapsed="false">
    <div data-role="collapsible" data-collapsed="false" data-theme="a">
        <h3>$11.48   -  10/31/2012   -   Duane Reade #14410  -  Brooklyn Ny</h3>
        <div data-role="controlgroup"  data-type="horizontal">
          <a class= "green" href="categorize.html" data-transition="slide" data-role="button">Yes</a>
          <a class="red" href="#" data-role="button">No</a>
          <a class= "blue" href="IDontKnow.html" data-transition="slide" data-role="button">I don't know</a>
        </div>
    </div>

And it collapses content when clicked. I want to add an animation to it so it slowly opens? I assume I use .animate ?

I have tried:

$('document').ready(function(){
    $('.theListItem').click(function(){
           $('.controlgroup').animate({height: 100%,), 500};
     });
});

Answer 1

You cannot use .controlgroup cause that class does not exist .
Use the attribute selector []

jsBin demo

$(function(){
    $('.theListItem').click(function(){
           $('[data-role="controlgroup"]', this).animate({height: 'toggle'}, 500);
     });
});

Or also:

$('[data-role="controlgroup"]', this).slideToggle(500);

jsBin demo

Answer 2

$(document).ready(function() {
    $('.theListItem').click(function() {
        $('.controlgroup').slideToggle(500);
    }
}

I guess you want to have such a sliding-effect - You should use slide, if you want to slide ;).