resolves #1699 convert example block to details/summary tag set if collapsible option is set (PR #3157)

- convert example block to details/summary tag set if collapsible option is set
- configure details tag to open by default if open option is set on collapsible example block
- add margin bottom to details tag in default stylesheet

4 files changed, 64 insertions, 5 deletions

diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index 7ffe037f..1c0358b1 100644
--- a/CHANGELOG.adoc
+++ b/CHANGELOG.adoc
@@ -81,6 +81,7 @@ Enhancements / Compliance::
   * log warning if conditional expression in ifeval directive is invalid (#3161)
   * drop lines that contain an invalid preprocessor directive (#3161)
   * rename AbstractBlock#find_by directives; use :prune in place of :skip_children and :reject in place of :skip
+  * convert example block into details/summary tag set if collapsible option is set; open by default if open option is set (#1699)
 
 Improvements::
 
diff --git a/data/stylesheets/asciidoctor-default.css b/data/stylesheets/asciidoctor-default.css
index ac120ad9..9944afe4 100644
--- a/data/stylesheets/asciidoctor-default.css
+++ b/data/stylesheets/asciidoctor-default.css
@@ -186,8 +186,8 @@ body.toc2.toc-right{padding-left:0;padding-right:20em}}
 #content h1:hover>a.anchor,#content h1>a.anchor:hover,h2:hover>a.anchor,h2>a.anchor:hover,h3:hover>a.anchor,#toctitle:hover>a.anchor,.sidebarblock>.content>.title:hover>a.anchor,h3>a.anchor:hover,#toctitle>a.anchor:hover,.sidebarblock>.content>.title>a.anchor:hover,h4:hover>a.anchor,h4>a.anchor:hover,h5:hover>a.anchor,h5>a.anchor:hover,h6:hover>a.anchor,h6>a.anchor:hover{visibility:visible}
 #content h1>a.link,h2>a.link,h3>a.link,#toctitle>a.link,.sidebarblock>.content>.title>a.link,h4>a.link,h5>a.link,h6>a.link{color:#ba3925;text-decoration:none}
 #content h1>a.link:hover,h2>a.link:hover,h3>a.link:hover,#toctitle>a.link:hover,.sidebarblock>.content>.title>a.link:hover,h4>a.link:hover,h5>a.link:hover,h6>a.link:hover{color:#a53221}
-details>summary:first-of-type{display:list-item;cursor:pointer;margin-bottom:1.25em}
-.audioblock,.imageblock,.literalblock,.listingblock,.stemblock,.videoblock{margin-bottom:1.25em}
+details,.audioblock,.imageblock,.literalblock,.listingblock,.stemblock,.videoblock{margin-bottom:1.25em}
+details>summary:first-of-type{cursor:pointer;display:list-item;outline:none;margin-bottom:.75em}
 .admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{text-rendering:optimizeLegibility;text-align:left;font-family:"Noto Serif","DejaVu Serif",serif;font-size:1rem;font-style:italic}
 table.tableblock.fit-content>caption.title{white-space:nowrap;width:0}
 .paragraph.lead>p,#preamble>.sectionbody>[class="paragraph"]:first-of-type p{font-size:1.21875em;line-height:1.6;color:rgba(0,0,0,.85)}
diff --git a/lib/asciidoctor/converter/html5.rb b/lib/asciidoctor/converter/html5.rb
index 1c22acb8..3219bb94 100644
--- a/lib/asciidoctor/converter/html5.rb
+++ b/lib/asciidoctor/converter/html5.rb
@@ -571,13 +571,23 @@ Your browser does not support the audio tag.
 
   def convert_example node
     id_attribute = node.id ? %( id="#{node.id}") : ''
-    title_element = node.title? ? %(<div class="title">#{node.captioned_title}</div>\n) : ''
-
-    %(<div#{id_attribute} class="exampleblock#{(role = node.role) ? " #{role}" : ''}">
+    if node.option? 'collapsible'
+      class_attribute = node.role ? %( class="#{node.role}") : ''
+      summary_element = node.title? ? %(<summary class="title">#{node.title}</summary>) : '<summary class="title">Details</summary>'
+      %(<details#{id_attribute}#{class_attribute}#{(node.option? 'open') ? ' open' : ''}>
+#{summary_element}
+<div class="content">
+#{node.content}
+</div>
+</details>)
+    else
+      title_element = node.title? ? %(<div class="title">#{node.captioned_title}</div>\n) : ''
+      %(<div#{id_attribute} class="exampleblock#{(role = node.role) ? " #{role}" : ''}">
 #{title_element}<div class="content">
 #{node.content}
 </div>
 </div>)
+    end
   end
 
   def convert_floating_title node
diff --git a/test/blocks_test.rb b/test/blocks_test.rb
index c6a536ae..3a51c4b9 100644
--- a/test/blocks_test.rb
+++ b/test/blocks_test.rb
@@ -852,6 +852,54 @@ context 'Blocks' do
       assert_xpath '(/*[@class="exampleblock"])[3]/*[@class="title"][starts-with(text(), "Exhibit ")]', output, 1
     end
 
+    test 'should create details/summary set if collapsible option is set' do
+      input = <<~'EOS'
+      .Toggle Me
+      [%collapsible]
+      ====
+      This content is revealed when the user clicks the words "Toggle Me".
+      ====
+      EOS
+
+      output = convert_string_to_embedded input
+      assert_css 'details', output, 1
+      assert_css 'details[open]', output, 0
+      assert_css 'details > summary.title', output, 1
+      assert_xpath '//details/summary[text()="Toggle Me"]', output, 1
+      assert_css 'details > summary.title + .content', output, 1
+      assert_css 'details > summary.title + .content p', output, 1
+    end
+
+    test 'should open details/summary set if collapsible and open options are set' do
+      input = <<~'EOS'
+      .Toggle Me
+      [%collapsible%open]
+      ====
+      This content is revealed when the user clicks the words "Toggle Me".
+      ====
+      EOS
+
+      output = convert_string_to_embedded input
+      assert_css 'details', output, 1
+      assert_css 'details[open]', output, 1
+      assert_css 'details > summary.title', output, 1
+      assert_xpath '//details/summary[text()="Toggle Me"]', output, 1
+    end
+
+    test 'should add default summary element if collapsible option is set and title is not specifed' do
+      input = <<~'EOS'
+      [%collapsible]
+      ====
+      This content is revealed when the user clicks the words "Toggle Me".
+      ====
+      EOS
+
+      output = convert_string_to_embedded input
+      assert_css 'details', output, 1
+      assert_css 'details > summary.title', output, 1
+      assert_xpath '//details/summary[text()="Details"]', output, 1
+    end
+
     test 'should warn if example block is not terminated' do
       input = <<~'EOS'
       outside