Page Sections Slide Toggle

Page Sections Slide Toggle

License

Synopsis

Add page section toggle effect to pages.

Version

• 0.8.1

SS Version

• 7.1

Dependencies

• Squarespace plan that supports JavaScript.

• jQuery

Fluid Engine Compatible

• Yes

---

Install

• Add the following to Website > Pages > Website Tools > Code Injection > HEADER.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

• Options

  • Page Specific

    • This option will be the one most will want to use if you have only a single store page you want to have this effect.

    • Add code from file page sections slide toggle.html to Page Settings > Advanced > Page Header Code Injection for the page. Please see Per-page code injection. Read the code for any instructions within.

  • Site-wide

    • This option is the one you want to use if you have multiple store pages where you want to have this effect.

    • Add code from file page sections slide toggle.html to Website > Pages > Website Tools > Code Injection > FOOTER. Please see Add code to code injection. Read the code for any instructions within.

• Add a section and set it's height to small. This whole section will become a clickable zone for the toggle effect.

  • Add a text block with text to be used as a label for the section.

  • Add a code block and add one of the following.

    • Arrow

      <x-twc-psst>
      
        <svg class="twc-psst-arrow">
                
          <use xlink:href="#twc-psst-arrow">
                  
            </use>
            
          </svg>
          
        </x-twc-psst>

    • Plus

      <x-twc-psst>
      
        <svg class="twc-psst-plus">
        
          <use xlink:href="#twc-psst-plus-horizontal" />
          
          <use xlink:href="#twc-psst-plus-vertical" />
          
          </svg>
          
        </x-twc-psst>

    Generally you will want to place the code block in horizontal alignment with the previous mentioned text block.

  • Optional Attributes

    Add attributes to the <x-twc-psst> opening tag.

    • data-section-count

      Toggle multiple sections. The default value when this attribute is not used is one. This effect does not check that you are using resonable values in the context of what you are building. If the wrong values are used it can cause unusual results. An example.

      <x-twc-psst data-section-count="2">

• Add a section after the previous section and add whatever blocks you want to the section. This will be the content that gets toggled (hidden/shown).

• You can repeat the previous two (or more when using the data-section-count attribute) section pattern for as many toggle sections as you want.

x-twc-psst-close tag

The <x-twc-psst-close> tag can be added to a code block at the end of a section to close the section. This can be useful for long sections so you don't have to scroll up to click and close the section.

• Arrow

  <x-twc-psst-close>
  
    <svg class="twc-psst-arrow">
            
      <use xlink:href="#twc-psst-arrow">
              
        </use>
        
      </svg>
      
    </x-twc-psst-close>

• Plus

  <x-twc-psst-close>
  
    <svg class="twc-psst-plus">
    
      <use xlink:href="#twc-psst-plus-horizontal" />
      
      <use xlink:href="#twc-psst-plus-vertical" />
      
      </svg>
      
    </x-twc-psst-close>

Demo

You can see a demo of this effect here.

Make a Donation

Please consider making a donation.

Changes

• 2024-10-28

  • fix for effect not working with FE
  • bumped version to 0.8.1

• 2024-08-17

  • watch for hash change events and open appropiate section if it contains anchor link
  • bumped version to 0.8.0

• 2024-08-09

  • use classes on classic editor row and columns that need display flex
  • bumped version to 0.7.1

• 2024-08-08

  • make code work in editor
  • fix for summary blocks not laying out properly
  • bumped version to 0.7.0

• 2024-07-20

  • adjust plus icon a bit for better alignment
  • add toggle icon justification feature
  • bumped version to 0.6.0

• 2024-06-12

  • fix duration check
  • remove non-blank page sections from hide/show page section code
  • bumped version to 0.5.2

• 2024-04-16

  • fix for Gallery section elements not showing images
  • bumped version to 0.5.1

• 2024-03-04

  • add feature to toggle multiple sections
  • add feature to toggle sections from the end of a section
  • bumped version to 0.5.0

• 2023-04-12

  • fix issue with data-toggle-color attribute not working
  • bumped version to 0.4.1

• 2023-02-08

  • add plus toggle icon option
  • add fluid engine compatibility
  • bumped version to 0.4.0

• 2022-04-29

  • user can override default toggle arrow color
  • code picks up a default color for toggle arrow from parent element
  • user can now use a text block with any Header or Paragraph style. previously the code only worked with Paragraph 2
  • update code for twc global, multiple effects can coexist
  • bumped version to 0.3.0

• 2021-07-28

  • take a less tortuous route for CSS
  • fix for page section blocks being hidden without code block tag being set
  • bumped version to 0.2d2

• 2021-07-28

  • fix for .nextUntil ( ) skipping .sqs-row
  • bumped version to 0.2d1

• 2021-07-19

  • initial version

--

* data-toggle-color

  Override the default color the code picks for the toggle icon. An example.
  
  ```html
  <x-twc-psst data-toggle-color="red" />
  ```
  
* data-toggle-icon

  Override the default toggle icon. An example.
  
  ```html
  <x-twc-psst data-toggle-icon="plus" />
  ```
  
* data-toggle-justify

  Override the default justification of the toggle icon. An example.
  
  ```html
  <x-twc-psst data-toggle-justify="center" />
  ```
  
  Values are from the CSS [justify-content][8] property.