How do I add SlideToggle to Expand/Collapse script for Content Query

Question

I have been using the following script to collapse groupings in content query web parts. In another script used for collapsing web parts, it contained a SlideToggle function.

Can anyone assist me with adding the SlideToggle function to this script?

<style type="text/css">
.groupheader:before{
content:"+";
font-weight:bold;
padding-right:10px;
}
.minus:before{
content:"-";
font-weight:bold;
padding-right:15px;
}
</style>
</script>
<script type="text/javascript">
   $(document).ready(function(){
    $('.cbq-layout-main li ul').hide();
    $('.cbq-layout-main ul li').click(function() {
 $(this).closest('li').find('.groupheader').toggleClass('minus');
$(this).find('ul').toggle();       
    }); 
});
 </script>


Here is the script I use for collapsing other web parts at the header:
<script type="text/javascript" >
  jQuery(document).ready(function() {
  jQuery(".ms-wpContentDivSpace ").hide();
  //toggle the component with class msg_body
  jQuery(".ms-webpart-chrome-title ").click(function()
  {
    jQuery(this).next(".ms-wpContentDivSpace ").slideToggle(500);
  });
});
</script>

Answer 1

If you paste the code in the browser console and it works you may need to wait for the elements to appear in the DOM before attaching the click event.

To do something like this you can use an timer that will check if the element is present in the DOM, when it finds the element the timer stops and attach the events to the elements.

Something like this might help you

jQuery(document).ready(function() { 
var clickElement = jQuery(".ms-webpart-chrome-title ");
var interval = setInterval(function(){
    if(clickElement.length)
    {        
        jQuery(".ms-wpContentDivSpace ").hide(); //toggle the component with class msg_body j
        jQuery(".ms-webpart-chrome-title ").click(function() { 
            jQuery(this).next(".ms-wpContentDivSpace ").slideToggle(500); 
        }); 
        clearInterval(interval);  
    }
}, 1000);});

Answer 2

 <style type="text/css">
.groupheader:before{
content:"+";
font-weight:bold;
padding-right:10px;
}
.minus:before{
content:"-";
font-weight:bold;
padding-right:15px;
}
</style>
</script>
<script type="text/javascript" >

$(document).ready(function(){

    $('.cbq-layout-main li ul').hide();

    $('.cbq-layout-main ul li').click(function() {
     $(this).find('ul').slideToggle();

    }, function() {
    $(this).find('ul').slideToggle();

    });

});
 </script>