1 button for sliding up and down

1 button for sliding up and down

hi there,

i have two buttons one YouTube and a GoogleMaps. When you click the YouTube button the content is loaded into a div (class: extra) and it will be shown on the page with a slideDown effect. The same function is added for the GoogleMaps button.

So when the content div is filled with a googleMaps and you click the youTube button the extra div will slideUp, filled with a movie and then it will slideDown.

This is working fine with the code below.

But i need one extra functionallity. When you click on the samen button the content div (class: extra) has to slideUp en all his child elements has to be removed.

Can someone help editting my code?



  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3.     $(function() {
  4.     $('.gm').bind({
  5.         click: function() {
  6.         var ext = $(this);
  7.         loadContent(ext, '/search/gmaps/IdDaytrip/' + ext.attr('value') + '.html');
  8.         }
  9.     });
  10.     $('.yt').bind({
  11.         click: function() {
  12.         var ext = $(this);
  13.         loadContent(ext, '/search/youtube/IdDaytrip/' + ext.attr('value') + '.html');
  14.         }
  15.     });
  16.     });
  17. });
  18. function loadContent(ext, url) {
  19.     var content = ext.parent('div').parent('div').next();
  20.     content.slideUp(content.is(':hidden') ? 0 : 2500, function() {
  21.         $.get(url, function(data) {
  22.             content.html(data).slideDown(2500);
  23.         });
  24.     });
  25. }
  26. </script>