Click Text – Show Gallery Section (3)

Demo: https://tuanphan-demo01.squarespace.com/ctext-show-gallery-section3?noredirect

Password: abc

#1. Add a Text Block with 3 text/link

Brand & Design – #brand-design
Copywriting – #copywriting
Digital Marketing – #digital-marketing

#2. Add 3 Gallery Grid Sections under

#3. Enable Gallery Caption + Add some text for images

For example:

#4. Use this free tool to find the ID of 3 Gallery Sections. In the example, we will have:

Brand & Design Gallery Section: section[data-section-id=”661e924ba18cdc6b7897fe7c”]
Digital Marketing Gallery Section: section[data-section-id=”661e9905986e326bd8c0a09f”]
Copywriting Gallery Section: section[data-section-id=”661e92806ec3525401c67664″]

#5. Use this code to Page Header Code Injection (Page where you added 3 Galleries)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Show initial: brand design
  $('section[data-section-id="661e924ba18cdc6b7897fe7c"]').addClass('show');  
  // Brand - Design
  $('a[href="#brand-design"]').click(function(){
    $('section[data-section-id="661e924ba18cdc6b7897fe7c"]').addClass("show");
    $('section:not([data-section-id="661e924ba18cdc6b7897fe7c"])').removeClass('show');
    }
  );
// Copywriting
$('a[href="#copywriting"]').click(function(){
   $('section[data-section-id="661e92806ec3525401c67664"]').addClass("show");
    $('section:not([data-section-id="661e92806ec3525401c67664"])').removeClass('show');
    }
  );
  // Digital Marketing
  $('a[href="#digital-marketing"]').click(function(){
   $('section[data-section-id="661e9905986e326bd8c0a09f"]').addClass("show");
    $('section:not([data-section-id="661e9905986e326bd8c0a09f"])').removeClass('show');
    }
  );
});
</script>
<style>
section[data-section-id="661e92806ec3525401c67664"], section[data-section-id="661e924ba18cdc6b7897fe7c"], section[data-section-id="661e9905986e326bd8c0a09f"] {
    display: none;
  transition: all 0.5s;
}
  section.show {
      display: block !important;
    transition: all 0.5s;
  }
</style>

#6. Explain code