DevineFitness Posted February 26, 2022 Share Posted February 26, 2022 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% }} Link to comment
creedon Posted February 27, 2022 Share Posted February 27, 2022 Please see the following. Not sure if it will work for your needs. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment