Jump to content

DevineFitness

Member
  • Posts

    2
  • Joined

  • Last visited

Personal Information

DevineFitness's Achievements

Level 1

Level 1 (1/20)

0

Reputation

  1. 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% }}
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.