How do make collapsible/expandable page sections to hide/show content?

Site URL: https://steviedevinefitness.com/homepage#plans-pricing

Hi there. I designed my website as a single page with anchor links to different sections of my homepage. I created a section for my personal training plans that I offer. I used code I found online to create pricing tables. (1 row of 3 pricing tables per section).  I have lots of different plans that I offer so it looks very busy when they are all showing and takes a long time to scroll through all the pricing tables, especially on mobile.  I wanted to add an arrow icon that acts like the one in the accordion block that collapses/expands the entire pricing table sections so they can be hidden until the arrow is clicked, reveling more of the plans I offer. I have already tried injecting the following code to do this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
 var SHOW_MORE = 'Show More'
 var COLLAPSE = 'Show Less'
 $(window).load(function(){
   $('a[href^="#expand"]').each(function(){
     var n = parseInt($(this).attr('href').split('-')[1]);
     var next_n_divs = $(this).parents('div.sqs-block').nextAll().slice(0,n)
     next_n_divs.wrapAll('<div class="extra-gallery" style="display:none;"></div>');
     $(this).click(function(){
       var target_gallery = $(this).parents('div.sqs-block').next('div.extra-gallery')
       if (target_gallery.is(':visible')){
         $(this).text(SHOW_MORE);
       }
       else {
         $(this).text(COLLAPSE);
       }
       target_gallery.slideToggle();
       return false;
     });
   });
 });
</script>

I noticed that this worked for everything else except where the pricing table sections were. I believe this probably has something to do with the other code for the pricing tables interfering or preventing this code from manipulating it. I would really appreciate some help so I can make this work.

This is the code I used for the pricing tables:

.sqs-col-4 {border: 5px solid #000000; width:25%!important; margin-left: 5.75% }
@media only screen and (max-width:768px){ .sqs-col-4 {margin-left:0%!important; margin-bottom: 5%} }

@media only screen and (min-width:641px) and (max-width:950px){
  .sqs-col-4 {border: 5px solid #000000; width:30%!important; margin-left: 1.5%; margin-bottom: 0% }}

Please see the following. Not sure if it will work for your needs.