Section heading that only displays if section has content

This forum is for all Flare related Tips and Tricks.
Have a tip or trick you use while working in Flare? Share it here.
Post Reply
kathryngz
Propeller Head
Posts: 75
Joined: Wed May 14, 2014 11:31 am

Section heading that only displays if section has content

Post by kathryngz »

Hi all,

I'm creating documents with a Resources section. The Resources section can have up to four subsections.

I want the subsection title to appear only if I've listed resources under it--in other words, make it conditional based on whether or not there's content below it.

Does anyone have an idea how I might do that?

Thanks!

Kathryn
devjoe
Sr. Propeller Head
Posts: 337
Joined: Thu Jan 23, 2014 1:43 pm

Re: Section heading that only displays if section has conten

Post by devjoe »

This is one of the gaps in CSS. You can write selectors which depend on what element(s) precede or contain the target element, but you cannot write selectors which depend on what follows the element or is contained within child elements.

You might be able to do it with a :last-child or :only-child selector, depending on the structure of these subsections. If, for instance, your subsections are divs with an H3.subtitle with the subsection title and then paragraphs and lists and whatever following the H3, then H3.subtitle:last-child {display:none;} or the same with only-child will cause the H3 heading to be hidden when there is not body content following it. However, if the div has any visible borders or margins then this may still leave an empty box or space behind.

Alternatively, you may be able to write some javascript to include in the page which identifies these empty subsections and hides them.
Post Reply