Make code snippets collapsed blocks that could be expanded

[pmackay]

It would support a more compact, visually focussed styleguide if the code blocks could be displayed collapsed by default and be dynamically expanded if the user wishes to review them.

Is there any current way to do this? Would it be of interest to others?

[vkoves]

Conveniently, this is fully possible with the current system!

Here's a GIF of a quick demo of this I made. Although you can't see my cursor in the GIF, I'm clicking on the block to toggle it.

I achieved this by taking advantage of the fact that you can just put in CSS and JS into your styleguide files.

Here's the example block being used:

<div class="red-back">
	Some nice long structure
	<ul>
		<li>One</li>
		<li>Two</li>
	</ul>
</div>
@css {
	.red-back {
		background: #ffbbbb;
		padding: 10px;
	}
}

And then some code I inserted after it that creates the styling and functionality for the toggleable code block. I've commented the snippet so it's clear what it does.

<!-- Import jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
// Prepend a clickable area and hide code by default
$(".lsg-code-block").prepend('<div class="toggle-code">Toggle Code</div>');
$(".lsg-code").hide();

// Make all code blocks toggle the inner code on click
$(".lsg-code-block").click(function() {
	$(this).children(".lsg-code").slideToggle();
});
</script>
@scss {
	.lsg-code-block {
		padding: 0px;

		> * { padding: 10px; }
		.toggle-code { background: #c1c1c1; }
	}
}

Not sure if the issue creator still needs this solved, but hopefully this helps out anyone else looking for something like this.

[hagenburger]

I’m thinking of an API to attach such code (maybe as plug in) for the next version.