diff --git a/private/lp.rkt b/private/lp.rkt
index 638149d4..93ab280d 100644
--- a/private/lp.rkt
+++ b/private/lp.rkt
@@ -134,7 +134,8 @@
 (define-for-syntax ((make-chunk-display racketblock unsyntax-id) stx)
   (syntax-parse stx
     ;; no need for more error checking, using chunk for the code will do that
-    [(_ (original-before-expr ...)
+    [(_ {~optional {~seq #:button button}}
+        (original-before-expr ...)
         original-name:id
         name:id
         stxn:number
@@ -183,7 +184,8 @@
                                (bold (italic (elemref '(prefixable tag)
                                                       #:underline? #f
                                                       #,str-display rest ...))
-                                     " ::=")))
+                                     " ::="))
+                      #,@(if (attribute button) #'{button} #'{}))
                 (list (smaller
                        (make-link-element "plainlink"
                                           (decode-content
@@ -199,8 +201,10 @@
     ;; no need for more error checking, using chunk for the code will do that
     [(_ {~optional {~seq #:save-as save-as:id}}
         {~optional {~and #:display-only display-only}}
+        {~optional {~seq #:button button}}
         {~and name:id original-before-expr}
         expr ...)
+     #:with (btn ...) (if (attribute button) #'{#:button button} #'{})
      (define n (get-chunk-number (syntax-local-introduce #'name)))
      (define/with-syntax name:n (format-id #'name "~a:~a" #'name (or n 1)))
      
@@ -259,6 +263,7 @@
                                        (syntax-local-introduce
                                         (quote-syntax #,(strip-source #'(expr ...))))])
                           #`(stx-chunk-display
+                             btn ...
                              (original-before-expr)
                              local-name
                              newname
@@ -266,7 +271,8 @@
                              local-expr (... ...)))])))
                ;; The (list) here could be important, to avoid the code being
                ;; executed multiple times in weird ways, when pre-expanding.
-               #`(list (stx-chunk-display (original-before-expr)
+               #`(list (stx-chunk-display btn ...
+                                          (original-before-expr)
                                           name
                                           name
                                           stx-n
diff --git a/spoiler1.rkt b/spoiler1.rkt
new file mode 100644
index 00000000..4e7d6f5b
--- /dev/null
+++ b/spoiler1.rkt
@@ -0,0 +1,134 @@
+#lang at-exp racket
+
+(provide spoiler-wrapper-collapsed
+         spoiler-default
+         spoiler-alt
+         spoiler-button-default-to-alt
+         spoiler-button-alt-to-default
+         spoiler1
+         spler)
+
+@(require scribble/manual
+          scribble/core
+          scribble/decode
+          scribble/html-properties
+          hyper-literate
+          (for-syntax syntax/parse))
+
+@(define spoiler-css
+   #"
+.spoiler-wrapper-expanded .spoiler-default,
+.spoiler-wrapper-expanded .spoiler-button-default-to-alt {
+  display:none;
+}
+.spoiler-wrapper-collapsed .spoiler-alt,
+.spoiler-wrapper-collapsed .spoiler-button-alt-to-default {
+  display:none;
+}
+
+.spoiler-button-default-to-alt,
+.spoiler-button-alt-to-default {
+  color: #2a657e;
+}
+")
+
+@(define spoiler-js
+   (string->bytes/utf-8
+    @string-append|{
+ function toggleSpoiler(e) {
+ var expanded = function(className) {
+ return className.match(/\bspoiler-wrapper-expanded\b/);
+ };
+ var collapsed = function(className) {
+ return className.match(/\bspoiler-wrapper-collapsed\b/);
+ };
+ var found = function(className) {
+ return expanded(className) || collapsed(className);
+ };
+ var wrapper = e;
+ while (e != document && e != null && ! found(e.className)) {
+ e = e.parentNode;
+}
+ console.log(e);
+ if (expanded(e.className)) {
+ e.className = e.className.replace(/\bspoiler-wrapper-expanded\b/,
+ 'spoiler-wrapper-collapsed');
+ } else {
+ e.className = e.className.replace(/\bspoiler-wrapper-collapsed\b/,
+ 'spoiler-wrapper-expanded');
+}
+}
+ }|))
+
+@(define-syntax-rule (def-style name)
+   (define name
+     (style (symbol->string 'name)
+            (list (css-addition spoiler-css)
+                  (js-addition spoiler-js)
+                  (alt-tag "div")))))
+
+@(def-style spoiler-wrapper-collapsed)
+@(def-style spoiler-default)
+@(def-style spoiler-alt)
+
+@(define (spoiler-button-default-to-alt txt)
+   (hyperlink
+    #:style (style "spoiler-button-default-to-alt"
+                   (list (css-addition spoiler-css)
+                         (js-addition spoiler-js)
+                         (attributes
+                          '([onclick . "toggleSpoiler(this);"]))))
+    "#"
+    txt))
+
+@(define (spoiler-button-alt-to-default txt)
+   (hyperlink
+    #:style (style "spoiler-button-alt-to-default"
+                   (list (css-addition spoiler-css)
+                         (js-addition spoiler-js)
+                         (attributes
+                          '([onclick . "toggleSpoiler(this);"]))))
+    "#"
+    txt))
+
+@(define (spoiler1 default button-default→alt button-alt→default alternate)
+   (nested-flow spoiler-wrapper-collapsed
+                (list
+                 (paragraph (style #f '())
+                            (spoiler-button-default-to-alt button-default→alt))
+                 (nested-flow spoiler-default
+                              (decode-flow default))
+                 (paragraph (style #f '())
+                            (spoiler-button-alt-to-default button-alt→default))
+                 (nested-flow spoiler-alt
+                              (decode-flow alternate)))))
+
+@(define-syntax spler
+   (syntax-parser
+     [(_ name default ... #:expanded expanded ...)
+      #'(begin
+         @chunk[#:save-as ck1
+                #:display-only
+                #:button
+                (list " " (smaller (spoiler-button-default-to-alt "expand")))
+                name
+                default ...]
+
+         @chunk[#:save-as ck2
+                #:button
+                (list " " (smaller (spoiler-button-alt-to-default "collapse")))
+                name
+                expanded ...]
+
+         (nested-flow spoiler-wrapper-collapsed
+                      (list (nested-flow spoiler-default
+                                         (decode-flow (ck1)))
+                            (nested-flow spoiler-alt
+                                         (decode-flow (ck2)))))
+
+         ;@spoiler1[@(ck1)
+         ;          "expand"
+         ;          "collapse"
+         ;          @(ck2)]
+
+         )]))
\ No newline at end of file