How do you toggle some text based on a click event

Hi Experts!

Thanks to GaryC123 I am almost done with this project.  I just need to toggle between some text based on a click.

I have a loop that finds some information. If there is more than one record it creates a collapsible div that you can toggle to see the additional info.

I just need to be able to toggle between a "more" and "hide".

Right now if you click one div than all the other div's will change text as well. (however, they dont toggle so that's a start)

Also there is a "show/hide all" button that has to toggle the individual div's text as well .

Here is what I have so far:

<script type="text/javascript">
$(function() {
  $('div.moredates').hide();
  $('a.moredatesclick').click(function() {
    // find the next element after the one clicked and slideToggle it
    $(this).next().slideToggle();
    //$(this).hide();  // "more" stays visible 
    
  });
});
</script>

<script type="text/javascript">
$(document).ready(function(){
    $(".moredatesclick").click(function(){
        $('#visible').slideToggle();            
        $('.moredatesclick').html($('.moredatesclick').text() == 'Hide me' ? 'Show Me' : 'Hide me');
    });
})
</script>

                                  <a class="moredatesclick">more</a>
                                 <div class="moredates" data-collapsed="true">  </div>

Select allOpen in new window