Making a Particulars Ingredient That Opens However By no means Closes

The

and

parts in HTML are helpful for making content material toggles for bits of textual content. By default, you see the

ingredient with a toggle triangle (▶︎) subsequent to it. Click on that to develop the remainder of the textual content contained in the

ingredient.

However as an example you need to have the ability to click on it open and that is that. Interactivity over. I noticed this utilized in a kind of “Learn extra” article designs, the place you click on that “Learn extra” button and the article expands, however there isn’t a going again.

I am going to preface this by saying that I am unsure that it is a nice thought generally. Eradicating controls simply would not really feel nice, nor does slapping an excessive amount of vital content material inside a

ingredient. However, hey, the online is a giant place and also you by no means know what you would possibly want. The truth that this may be executed in a number of traces of HTML/CSS is compelling and would possibly scale back the necessity for heavier options.

The primary trick right here is to cover the abstract when particulars is open.

particulars[open] abstract

That is it actually.

CodePen Embed Fallback

Leave a Reply