A toggle button for cover, grid, list view

Hey guys I have a video portfolio page.

I want to add a toggle button so users can quickly change the layout of the videos on the portfolio page.

Here is an example https://www.joy.inc/work

This is my site https://www.apanuistudio.com/motion-gallery

I don't see toggle button. Or you mean Smile icon > Click on it will show mega menu?

@tuanphan 

The function I'm looking for is on this website  https://www.joy.inc/work

You can press "COVER, GRID, LIST" to change the layout of their videos.

Is this possible with Squarespace?

I used to build similar function, you can see this video

My idea is add 3 sections then design 3 layout: cover, grid, list

next add a section above them, add 3 buttons (or text link): cover, grid, list

then we can give you code to when users click on each button/text link >> show corresponding section under

What do you think?

We can give it a go for sure 🙂

I can do that right away. Do you have the code for that?

On 11/12/2023 at 5:03 PM, tuanphan said:

I used to build similar function, you can see this video

My idea is add 3 sections then design 3 layout: cover, grid, list

next add a section above them, add 3 buttons (or text link): cover, grid, list

then we can give you code to when users click on each button/text link >> show corresponding section under

What do you think?

 

We can give it a go for sure 🙂

I can do that right away. Do you have the code for that?

You need to add 3 sections + 3 buttons first, then share site url, we can check code

Each case have a different code, no universal code

14 hours ago, tuanphan said:

You need to add 3 sections + 3 buttons first, then share site url, we can check code

Each case have a different code, no universal code

I created 3 sections + 3 corresponding words "cover, grid, list" to link to.

Here is the link https://apanuistudio.squarespace.com/motion-gallery-1

On 11/19/2023 at 5:27 AM, Apiata said:

I created 3 sections + 3 corresponding words "cover, grid, list" to link to.

Here is the link https://apanuistudio.squarespace.com/motion-gallery-1

 

You need to change 3 words to 3 buttons, or 3 text links, with url

• Grid - #grid
• Cover - #cover
• List - #list

Current there is no way to target on each word on your heading 4 text

On 11/22/2023 at 4:28 PM, tuanphan said:

You need to change 3 words to 3 buttons, or 3 text links, with url

• Grid - #grid
• Cover - #cover
• List - #list

Current there is no way to target on each word on your heading 4 text

all done. Words are now text links. Anything else I should do?

Add this code to last Line in Website Tools (under Not Linked) > Code Injection > Footer. See video

<script>
  $(document).ready(function(){
  // Cover
$('h4 [href="#cover"]').click(function() {
    $('[data-section-id="6555941177381b2e3561cb46"]').show();
  $('[data-section-id="65559916081ddb3afe27e40f"],[data-section-id="65559d5556e2cf601c1aeed7"]').hide();
    $(this).addClass('button-active');
  $('h4 a:not([href="#cover"])').removeClass('button-active');
});
 // Grid
  $('h4 [href="#grid"]').click(function() {
    $('[data-section-id="65559916081ddb3afe27e40f"]').show();
  $('[data-section-id="6555941177381b2e3561cb46"],[data-section-id="65559d5556e2cf601c1aeed7"]').hide();
     $(this).addClass('button-active');
  $('h4 a:not([href="#grid"])').removeClass('button-active');
});
  // List
  $('h4 [href="#list"]').click(function() {
    $('[data-section-id="65559d5556e2cf601c1aeed7"]').show();
  $('[data-section-id="6555941177381b2e3561cb46"],[data-section-id="65559916081ddb3afe27e40f"]').hide();
     $(this).addClass('button-active');
  $('h4 a:not([href="#list"])').removeClass('button-active');
});
});
</script>
<style>
 /* Hide Grid - List */
  [data-section-id="65559916081ddb3afe27e40f"], [data-section-id="65559d5556e2cf601c1aeed7"] {
  	display: none;
  }
  /* set class when clicking buttons */
  .show {
  	display: block !important;
  }
  .hide {
  	display: none !important;
  }
  a.button-active {
    color: gray !important;
}
</style>