Skip to content

Page Sections Slide Toggle

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

Page Sections Slide Toggle

README.md

Page Sections Slide Toggle

License

Synopsis

Add page section toggle effect to pages.

Version

  • 0.10.0

SS Version

  • 7.1

Dependencies

Fluid Engine Compatible

  • Yes

Install

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

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

  • Options

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

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

        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.

      • data-open

        Open sections when the page loads. The default value when this attribute is not used is false. An example to have the sections open on page load.

        <x-twc-psst data-open="true">

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

Note: If you test the close feature in Preview it will trigger the edit mode.

Demo

You can see a demo of this effect here.

Make a Donation

Please consider making a donation.

Changes

  • 2026-03-11

    • added support for anchor links
    • bumped version to 0.10.0

  • 2026-02-17

    • moved options out of main code
    • added sections open on load feature
    • bumped version to 0.9.0

  • 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