how to hide again the li.fields by clicking again in li.title? with animation slideDown and slideUp

how to hide again the li.fields by clicking again in li.title? with animation slideDown and slideUp

<script>
$(document).ready(function(){
 
    $('li.fields').addClass('hide');  // hide a text
 
    $('ul').on('click', 'li.title', function() {  // when click in the title do a animation slide.
        $(this).next().slideDown(100).siblings('li.fields').slideUp(100);
    });
});
</script>


with this code i can move the tilte and hide the li.fields. my problem for now is make some rule when click again in the same title wil close with the slide up animation and hide the li.fields

sorry my bad english thanks in advange for the reply!