Jekyll plugin for a tag block mimicking the behaviour of the HTML5 "details" element

details_tag.rb

# _plugins/details_tag.rb

module Jekyll
  module Tags
    class DetailsTag < Liquid::Block

      def initialize(tag_name, markup, tokens)
        super
        @caption = markup
      end

      def render(context)
        site = context.registers[:site]
        converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
        # below Jekyll 3.x use this:
        # converter = site.getConverterImpl(::Jekyll::Converters::Markdown)
        caption = converter.convert(@caption).gsub(/<\/?p[^>]*>/, '').chomp
        body = converter.convert(super(context))
        "<details><summary>#{caption}</summary>#{body}</details>"
      end

    end
  end
end

Liquid::Template.register_tag('details', Jekyll::Tags::DetailsTag)

I was seeing a newline between the black triangle icon and the caption.
This is caused by the converter placing

tags around the caption.

How to build the circuit shown above

I suppressed the paragraph by appending a .gsub phrase to line 16:

    caption = converter.convert(@caption).gsub(/<\/?p[^>]*>/, '').chomp

This removes the

tags, rendering the

tag as

How to build the circuit shown above

I found this fix here: https://github.com/libmir/blog/blob/master/_plugins/figure.rb

The only small flaw is, when closed, the space after the caption is a little small and cramps a following ##header.

Updated Gist for Jekyll 3.x and incorporated @willymcallister's suggestion

@towbi thanks for making this and the blog post. However, when I put a list inside this details tag, which is also inside a list, it has indentation issues. I fixed this by changing the body= line to

body = converter.convert(super(context)).gsub("\n", "").chomp

This works for my use case, however it might cause problems with pre tags, which I haven't run into personally yet.