Creating a 'collapse all' button for elements that open on trigger

Helpdesk Website Builder
,
1

Hi there!

I have a website that uses buttons to show/hide additional elements. If the user clicks through all the buttons the amount of extra content on screen adds up, so I’d like to include a ‘collapse all’ button in the bottom right that pops up and allows the user to quickly reset the buttons on the page. Ideally this ‘collapse all’ button will appear only when one of these buttons are clicked, and then the user can choose to click it to close any elements that have been triggered to open. Once all the buttons are closed again the ‘collapse all’ button should also be hidden.

I’ve tried piecing together code from an assortment of tutorials but it didn’t make a 100% sense to me since I couldn’t find the exact concept I’m looking for :laughing:. Most of my attempts involved going through the different animations in the sitejet builder and playing around with the group/trigger options but I couldn’t figure out the solution.

For ref, here’s the wip of the website I’m working on: https://www.peach.studiobenecreative.com/

If anyone has any tips on how I’d get something like this to work feel free to let me know!

Thank you, ~Peach

2

Hey there Peach, well first of all, that looks fantastic! I love the design! Let me check with a dev if we got an idea.

1 Like
4

Aw, thank you so much! I appreciate the help :blush:

1 Like
5

Ahh! Thank you so much for this, and for providing the helpful instructions too. It sounds like exactly the solution I needed, I’ll definitely try this out and let you know how I go! :smile: :sparkles:

2 Likes
6

Hello Peachenelle
You can take the following steps to achieve your goal

  1. You can add a container around (see image > red box)
  2. Move all buttons and the content-containers to that new container (see image). So it is easier to select only the buttons in this section
  3. Set a class to that container that is now your “main” buttons container, you can use e.g the class “myContainer”
  4. Set a class to all content container e.g “myContent” (purple box)
  5. Design a separate button and set a class e.g “myToggleButton” (aka “collapse all” button)

image
image1509×1376 147 KB

  1. Add this code to the JS editor
$(function() {
  const $container = $('.myContainer');
  const $toggleButton = $('.myToggleButton');
  function showToggleButton() {
    $toggleButton.show();
  }
  function hideContent() {
    $('.myContent', $container).hide();
    $('.ed-button a.button', $container).removeClass('active'); //reset the buttons on the page
    $toggleButton.hide(); // hide toggleButton when resetting all buttons
  }
  $container.on('click', '.ed-button a.button', showToggleButton); // show me the toggleButton, when one of these buttons are clicked
  $toggleButton.on('click', hideContent);
});

Hope it helps :slight_smile:

1 Like