Creating a NICE collapsible menu
It's just simple jQuery.

SEE THIS EXAMPLE I MADE FOR YOU

In Drupal to use jQuery you need to wrap it in 

(function ($) {

    //code goes here

})(jQuery);


so your code should look like this

(function ($) {

    $(document).ready(function() {
         $(".button").click(function () {
             $(this).next('.content').slideToggle();
         });
    });

})(jQuery);


Remember that you need to add to your css .content { display: none; } OR you could do it with jquery

(function ($) {

    $(document).ready(function() {
       $(".content").css("display", "none");
         $(".button").click(function () {
             $(this).next('.content').slideToggle();
         });
    });

})(jQuery);


Note: this code works assuming there are no divs in between your .button and .content. If there are divs in between them, you might need to modify the slideToggle line.