# Mixed multi-cell hide details in Pluto

**URL:** <https://discourse.julialang.org/t/mixed-multi-cell-hide-details-in-pluto/73824>\
**Category:** General Usage\
**Tags:** pluto\
**Created:** [December 30, 2021, 5:41pm UTC](https://discourse.julialang.org/t/mixed-multi-cell-hide-details-in-pluto/73824 "2021-12-30T17:41:05Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Christopher\_Fisher](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/christopher_fisher/32/26132_2.png) [@Christopher\_Fisher](https://discourse.julialang.org/u/Christopher_Fisher)\
**Post date:** [December 30, 2021, 5:41pm UTC](https://discourse.julialang.org/t/mixed-multi-cell-hide-details-in-pluto/73824/1 "2021-12-30T17:41:05Z")

</div>

I would like to hide multiple cells of details in Pluto. The example notebooks in Pluto includes the following function to hide/expand details for a single cell:

```julia
details(inputs...; summary="Show more") = @htl("""
	<details>
		<summary>$(summary)</summary>
		$(map(x -> x, inputs))
	</details>
	""")

```

I would like to support multiple cells with potentially different types of information, such as markdown, markdown with latex and code, and code by itself. I attempted to extend the functionality but ran into two issues. First, all cells have a grey background. Second, it would not work for julia code. Is there a way to achieve this functionality? Thank you

Here is my [attempt](https://gist.github.com/itsdfish/acb7a4cfa64a0089ae12e0d0903b8106)

---

<div class="post-metadata">

**Author:** ![sashmit](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sashmit/32/18791_2.png) [@sashmit](https://discourse.julialang.org/u/sashmit)\
**Post date:** [December 30, 2021, 6:38pm UTC](https://discourse.julialang.org/t/mixed-multi-cell-hide-details-in-pluto/73824/2 "2021-12-30T18:38:00Z")

</div>

it sounds like you want something similar to  
the Div element in PlutoUI.ExperimentalLayout? except instead of outputing the div element, you want to output the detail element.

[https://github.com/JuliaPluto/PlutoUI.jl/blob/55445f0bf9586bf865af23cc850262f3dcfb8f7b/src/Layout.jl#L65](https://github.com/JuliaPluto/PlutoUI.jl/blob/55445f0bf9586bf865af23cc850262f3dcfb8f7b/src/Layout.jl#L65)

Here is a quick attempt, seems to work for me.

You can pass in additional CSS via the style keyword, you can do quite a bit with the detail/summary tags it looks like: [Exploring What the Details and Summary Elements Can Do | CSS-Tricks - CSS-Tricks](https://css-tricks.com/exploring-what-the-details-and-summary-elements-can-do/)

```julia

# ╔═╡ 1feb4232-10d7-4fa0-ab2b-6afd0d64df8c
using HypertextLiteral

# ╔═╡ 53eb6834-67b3-4a76-a64b-9c1fec4e6cad
using PlutoUI

# ╔═╡ 0816f761-bc07-4120-b148-b6b2fe481abf
[
	Detail([Summary("test"), md" __foo__", @htl("<h1><marquee>bar</marquee></h1>")]); 
	Detail([Summary("test2"), md" __foo__", @htl("<h1><marquee>bar</marquee></h1>"), Dict("foo"=>Detail([Summary("nestedtest"), md" __foo__", @htl("<h1><marquee>bar</marquee></h1>")]))])
]

# ╔═╡ da2b5d9a-c319-4338-b7f7-05cb60ce0e07
Summary(text) = @htl("<summary>$text</summary>")

# ╔═╡ 47e65485-c485-4ee0-8998-130f3c8e179b
begin
	Base.@kwdef struct HtlDetail
		children::Any
		style::PlutoUI.ExperimentalLayout.CSS=Dict()
		class::Union{String,Nothing}=nothing
	end
	
	function Base.show(io::IO, m::MIME"text/html", d::HtlDetail)
		h = @htl("""
			<details style=$(d.style) class=$(d.class)>
			$(d.children)
			</details>
			""")
		show(io, m, h)
	end
end

# ╔═╡ 37d2ebeb-bb23-4a52-96e4-ffcfd060d8c3
Detail(x::PlutoUI.ExperimentalLayout.Iterable; style::PlutoUI.ExperimentalLayout.CSS="", class::Union{Nothing,String}=nothing) = 
			HtlDetail(;
				children=[embed_display(i) for i in x], 
				style=style,
				class=class,
			)

```

---

<div class="post-metadata">

**Author:** ![Christopher\_Fisher](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/christopher_fisher/32/26132_2.png) [@Christopher\_Fisher](https://discourse.julialang.org/u/Christopher_Fisher)\
**Post date:** [December 30, 2021, 7:34pm UTC](https://discourse.julialang.org/t/mixed-multi-cell-hide-details-in-pluto/73824/3 "2021-12-30T19:34:16Z")

</div>

Thanks for looking into this. Roughly what I am trying to do is create a set of nested cells that can be hidden or revealed—almost like a mini notebook nested within a notebook. I’m not sure if it necessarily needs to have all of the same GUI functionality as a Pluto cell (i.e. the add cell button), but I was hoping to have something that supports Markdown, Julia, and Latex.

I tried modifying your example, but I couldn’t figure out how to get it to work. For example, how would you create the following 3 cells:

**Cell 1**

```julia
md"
Some text
"

```

**Cell 2**

```julia
x = 1
y = x * 2

```

**Cell 2**

```julia
md"
 $\theta=$ $(round.(1/3, digits=3))
"

```

---

<div class="post-metadata">

**Author:** ![Christopher\_Fisher](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/christopher_fisher/32/26132_2.png) [@Christopher\_Fisher](https://discourse.julialang.org/u/Christopher_Fisher)\
**Post date:** [December 30, 2021, 8:01pm UTC](https://discourse.julialang.org/t/mixed-multi-cell-hide-details-in-pluto/73824/4 "2021-12-30T20:01:38Z")

</div>

Basically, what I cannot figure out how to do is include a cell/input with Julia code that shows the code and its output. This is my [attempt](https://gist.github.com/itsdfish/acb7a4cfa64a0089ae12e0d0903b8106) so far.

---

<div class="post-metadata">

**Author:** ![sashmit](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sashmit/32/18791_2.png) [@sashmit](https://discourse.julialang.org/u/sashmit)\
**Post date:** [December 31, 2021, 7:46pm UTC](https://discourse.julialang.org/t/mixed-multi-cell-hide-details-in-pluto/73824/5 "2021-12-31T19:46:26Z")

</div>

a simple approach is:

```julia
# ╔═╡ 03c9d788-f06a-4edb-8550-f1c06a914b38
begin
    
    cell1 = md"some text"

    cell2 = begin 
		x = 1
		y = x * 2
	end

    cell3 = md"``\theta`` $(round.(1/3, digits=3))"
end

# ╔═╡ 9f6b0367-7df2-446e-be91-0956fb64e309
PlutoUI.ExperimentalLayout.Div(
    [
    Detail([Summary("Cell 1"), cell1]),
    Detail([Summary("Cell 2"), cell2]),
    Detail([Summary("Cell 3"), cell3])
])

```

---

<div class="post-metadata">

**Author:** ![Christopher\_Fisher](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/christopher_fisher/32/26132_2.png) [@Christopher\_Fisher](https://discourse.julialang.org/u/Christopher_Fisher)\
**Post date:** [December 31, 2021, 11:22pm UTC](https://discourse.julialang.org/t/mixed-multi-cell-hide-details-in-pluto/73824/6 "2021-12-31T23:22:27Z")

</div>

Thanks! It looks like I needed to wrap cell 2 in a `begin` block. This is close to what I need. One last question: Is there a way to display the contents of cell 2 in addition to the output?

The updated code is [here](https://gist.github.com/itsdfish/acb7a4cfa64a0089ae12e0d0903b8106).

---

<div class="post-metadata">

**Author:** ![Christopher\_Fisher](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/christopher_fisher/32/26132_2.png) [@Christopher\_Fisher](https://discourse.julialang.org/u/Christopher_Fisher)\
**Post date:** [January 3, 2022, 4:31pm UTC](https://discourse.julialang.org/t/mixed-multi-cell-hide-details-in-pluto/73824/7 "2022-01-03T16:31:29Z")

</div>

I wanted to bump this one last time since I initially asked during the holidays when many people may not be on discourse. Basically, I want to see if anyone knows how to display Julia code and its output in a details element. Currently, it displays the output, but not the code.