Prompt Title: Zendesk

Certainly! Here's a sample script in JavaScript that you can use to create collapsible sections for Zendesk Guide articles:

javascriptCopy code
// Find all collapsible sections
const collapsibleSections = document.querySelectorAll('.collapsible-section');

// Loop through each section and add click event listener to toggle visibility
collapsibleSections.forEach(section => {
  const toggleBtn = section.querySelector('.toggle-btn');
  const content = section.querySelector('.section-content');
  
  // Set initial state of section to collapsed
  content.style.display = 'none';
  
  toggleBtn.addEventListener('click', () => {
    if (content.style.display === 'none') {
      content.style.display = 'block';
    } else {
      content.style.display = 'none';
    }
  });
});

To use this script, you'll need to add the following HTML code to your Zendesk Guide article:

htmlCopy code
<div class="collapsible-section">
  <button class="toggle-btn">Show/Hide</button>
  <div class="section-content">
    <!-- Your content here -->
  </div>
</div>

You can customize the appearance of the toggle button and section content by editing the CSS styles.

To use this script, follow these steps:

1. Open the Zendesk Guide article that you want to add collapsible sections to.
2. Click the "Edit" button to open the article editor.
3. Click the "Source" button in the editor toolbar to switch to the HTML source view.
4. Add the following HTML code to your article where you want to create a collapsible section:

htmlCopy code
<div class="collapsible-section">
  <button class="toggle-btn">Show/Hide</button>
  <div class="section-content">
    <!-- Your content here -->
  </div>
</div>

You can add this code multiple times to create multiple collapsible sections in your article.

5. Click the "Rich Text" button in the editor toolbar to switch back to the rich text editor view.
6. Scroll to the bottom of the article and click the "Add JS" button in the "Custom JavaScript" section.
7. Paste the following JavaScript code into the text area:

javascriptCopy code
// Find all collapsible sections
const collapsibleSections = document.querySelectorAll('.collapsible-section');

// Loop through each section and add click event listener to toggle visibility
collapsibleSections.forEach(section => {
  const toggleBtn = section.querySelector('.toggle-btn');
  const content = section.querySelector('.section-content');
  
  // Set initial state of section to collapsed
  content.style.display = 'none';
  
  toggleBtn.addEventListener('click', () => {
    if (content.style.display === 'none') {
      content.style.display = 'block';
    } else {
      content.style.display = 'none';
    }
  });
});

8. Click the "Save" button to save the changes to your article.

That's it! Your article now has collapsible sections that your readers can expand and collapse by clicking on the toggle buttons. You can customize the appearance of the toggle button and section content by editing the CSS styles.