Jump to content

How to create a show/hide button for sidebar using toggle?

Recommended Posts

Site URL: https://www.elizabeth-pierce.com/meal-plan-app

Hi all,

I've created a sidebar using a plugin and I'm looking for a way to be able to show or hide it upon clicking a button.

I found a way to show more or less using code I found on this forum, however, because my sidebar was created using a separate page, the show more/show less buttons only work for the 'sidebar' page and not the 'meal plan app.' page it was made for.

Here is the code I tried (from this thread: https://forum.squarespace.com/topic/49530-how-do-i-create-hideshow-section-of-an-entire-page-of-text-images-and-or-galleries-in-squarespace-spoiler-functionaccordiancollapse/):

 /* 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'
   // prepares all buttons by wrapping the correct # of following divs into a div with class 'extra_gallery'
     // 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
       image = new Image();
       image.src = $(this).attr('data-src')+'?format=500w';
     // control for click behavior
       var target_gallery = $(this).parents('div.sqs-block').next('div.extra-gallery')
       if (target_gallery.is(':visible')){
       else {
       return false;

Sidebar page.png

Link to comment
  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

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