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?
- <script type="text/javascript">
- $(document).ready(function() {
- $(function() {
- $('.gm').bind({
- click: function() {
- var ext = $(this);
- loadContent(ext, '/search/gmaps/IdDaytrip/' + ext.attr('value') + '.html');
- }
- });
- $('.yt').bind({
- click: function() {
- var ext = $(this);
- loadContent(ext, '/search/youtube/IdDaytrip/' + ext.attr('value') + '.html');
- }
- });
- });
- });
- function loadContent(ext, url) {
- var content = ext.parent('div').parent('div').next();
- content.slideUp(content.is(':hidden') ? 0 : 2500, function() {
- $.get(url, function(data) {
- content.html(data).slideDown(2500);
- });
- });
- }
- </script>