Jump to content

URGENT! how to Expand Banner Section upon clicking custom Show More button

Recommended Posts

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.

 

Screenshot 2021-02-12 at 1.27.31 PM.png

Link to comment
  • Replies 2
  • Views 1.4k
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.