<commit_before><!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta charset="utf-8">
        <title>Moduler.js - Accordion</title>
        <meta name="viewport" content="width=device-width">
        <style>
            body {
                background: #F0F0F0;
                margin: 1em;
            }
            .red { background: red; padding: 10px; }
            .green { background: green; padding: 10px; }
            .test { width: 30%; float: left; margin-right: 3%;}
            .clear { clear: both; }

            /* basic styles for an accordion */
            .accordion {
                background: #ACACAC;
            }
            .accordion-header { 
                background: #fff; 
                padding: 10px; 
                margin: 0;
                border-top: 1px solid #666;
                cursor: pointer;
                font-weight: normal;
            }
            .accordion-header.is-active { font-weight: bold; }
            .accordion-section { padding: 0 10px; }

            .accordion.js-ready .accordion-section { display: none; }
            .accordion .accordion-section.is-active { display: block; }
        </style>
    </head>
    <body>
        <h1>Moduler.js - Accordion module</h1>
        
        <div class="clear">
          <button data-module="dispatcher" data-dispatcher='{ "triggerEvent": "expandAll", "triggerSelector": ".accordion", "triggerContext": "body" }'>Expand All</button>
          <button data-module="dispatcher" data-dispatcher='{ "triggerEvent": "collapseAll", "triggerSelector": ".accordion", "triggerContext": "body" }'>Collapse All</button>
        </div>

        <div class="test">
          <h2>Accordion with sliding animation</h2>
          <div class="accordion" data-module="accordion" data-accordion='{ "expandFirst": true }'>
            <h3 class="accordion-header">Section 1</h3>
            <div class="accordion-section">
              <p>
                  This section will be opened automatically on load. 
              </p>
              <p>
                  Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
                  ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
                  amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
                  odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
              </p>
            </div>
            <h3 class="accordion-header">Section 2</h3>
            <div class="accordion-section" data-module="loader" data-loader='{ "url": "_partial.html", "event": "accordion-expand", "contentElement": ".accordion-loader-1" }'>
              <p>
                  Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
                  purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
                  velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
                  suscipit faucibus urna.
              </p>
              <h4>Loading content on accordion-expand event</h4>
              <div class="accordion-loader-1"></div>
            </div>
            <h3 class="accordion-header">Section 3</h3>
            <div class="accordion-section"><commit_msg>Added another button on accordion sample page<commit_after><!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta charset="utf-8">
        <title>Moduler.js - Accordion</title>
        <meta name="viewport" content="width=device-width">
        <style>
            body {
                background: #F0F0F0;
                margin: 1em;
            }
            .red { background: red; padding: 10px; }
            .green { background: green; padding: 10px; }
            .test { width: 30%; float: left; margin-right: 3%;}
            .clear { clear: both; }

            /* basic styles for an accordion */
            .accordion {
                background: #ACACAC;
            }
            .accordion-header { 
                background: #fff; 
                padding: 10px; 
                margin: 0;
                border-top: 1px solid #666;
                cursor: pointer;
                font-weight: normal;
            }
            .accordion-header.is-active { font-weight: bold; }
            .accordion-section { padding: 0 10px; }

            .accordion.js-ready .accordion-section { display: none; }
            .accordion .accordion-section.is-active { display: block; }
        </style>
    </head>
    <body>
        <h1>Moduler.js - Accordion module</h1>
        
        <div class="clear">
          <button data-module="dispatcher" data-dispatcher='{ "triggerEvent": "expandAll", "triggerSelector": ".accordion", "triggerContext": "body" }'>Expand All</button>
          <button data-module="dispatcher" data-dispatcher='{ "triggerEvent": "collapseAll", "triggerSelector": ".accordion", "triggerContext": "body" }'>Collapse All</button>
          - 
          <button data-module="dispatcher" data-dispatcher='{ "triggerEvent": "expandSection", "triggerSelector": ".accordion .accordion-header:last", "triggerContext": "body" }'>Toggle Last Section</button>
        </div>

        <div class="test">
          <h2>Accordion with sliding animation</h2>
          <div class="accordion" data-module="accordion" data-accordion='{ "expandFirst": true }'>
            <h3 class="accordion-header">Section 1</h3>
            <div class="accordion-section">
              <p>
                  This section will be opened automatically on load. 
              </p>
              <p>
                  Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
                  ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
                  amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
                  odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
              </p>
            </div>
            <h3 class="accordion-header">Section 2</h3>
            <div class="accordion-section" data-module="loader" data-loader='{ "url": "_partial.html", "event": "accordion-expand", "contentElement": ".accordion-loader-1" }'>
              <p>
                  Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
                  purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
                  velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
                  suscipit faucibus urna.
              </p>
              <h4>Loading content on accordion-expand event</h4>
              <div class="accordion-loader-1"></div>
            </div>
            <h3 class="accordion-header">Section 3</h3>
            <div class="accordion-section">
{'fraction_non_alphanumeric': 0.12227266071167081, 'fraction_numerical': 0.011421877288036316, 'mean_word_length': 1.7843456991439055, 'pattern_counts': {'":': 23, '<': 93, '<?xml version=': 0, '>': 93, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1652977', 'n_tokens_mistral': 2108, 'n_tokens_neox': 1948, 'n_words': 512}