Guest Posted February 12, 2021 Share Posted February 12, 2021 Hello! Would appreciate any quick help for this, I'd be really grateful! Thank you! I added an image into my banner section as my 'background', and inserted several Image & Text content boxes that could expand and show more by clicking on the Show More button. I followed this tutorial to achieve the expanding Show More button: Basically using this code for the expanding Show More button: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> /* This script is a custom script to control the 'show' / 'hide' extra feature. To use: give each button you want to make an expander an href of "expand-3", if you want it to expand / collapse the next 3 blocks. Make sure to make each button say 'Show More' as its default text. */ var SHOW_MORE = 'Show More' var COLLAPSE = 'Show Less' $(window).load(function(){ // prepares all buttons by wrapping the correct # of following divs into a div with class 'extra_gallery' $('a[href^="#expand"]').each(function(){ // parse # of sibling elements to wrap from href attribute and then wrap them. var n = parseInt($(this).attr('href').split('-')[1]); var next_n_divs = $(this).parents('div.sqs-block').nextAll().slice(0,n) // this is the line that is different. we use display:none; on the DOM element that wraps the additional gallery. next_n_divs.wrapAll('<div class="extra-gallery" style="display:none;"></div>'); /* // preload_images next_n_divs.find('img').each(function(){ image = new Image(); image.src = $(this).attr('data-src')+'?format=500w'; console.log($(this).attr('data-src')); }); // control for click behavior */ $(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> My problem now is that the contents that you expand with the Show More button is not quite visible/cut off because the image of my banner section doesn't stretch with the expanded content. (I've attached a screenshot of the page, with highlight on the text for referencing.) Btw, I'm using the Brine template/ Is there a way to expand the banner section once I click the Show More button so my contents can be visible? Again, any help would be appreciated! I'm going crazy with the lack of progress on my part on this huhuhuh. Link to comment
tuanphan Posted February 14, 2021 Share Posted February 14, 2021 Have you found the solution yet? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Guest Posted February 19, 2021 Share Posted February 19, 2021 not really, decided to go with a different layout instead. thank you tho! 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