Jump to content

how to toggle show/hide text above as well as below

Recommended Posts

I am trying to create an acceptance button using the code provided below. I can not figure out how to hide the text above when the text below is shown. I know there are much easier ways to make an acceptance button but this is just how I wanna do mine. Any help on the topic would be greatly appreciated. I honestly don't even know what language this is to be exact. It looks like javascript to me but my friend tells me its not.

 

<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 = 'I Accept'
 var COLLAPSE = 'Show Agreement'
 $(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>

Link to comment
  • Replies 3
  • Views 1.1k
  • Created
  • Last Reply

Could you show us the current page that uses the code? or at least the name of the template

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Hi there

i need to check your site to tweak the script to correct, you may want to enable temp password so I can have a look

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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.