Jade engine template: show and hide a specific block

Question

I have a jade pattern

extends _base
block content
  include ./partials/_main-header
  .Template2RightBig
    .container
      .row
        block content2RightBig
          .col-md-3.Template2RightBig--left.column
            block left-column
          .col-md-9.Template2RightBig--right.column
            .Template2RightBig--right-header
              block right-column-header
            .Template2RightBig--right-annotation
              block right-column-annotation
            block right-column
  include ./partials/_footer

I want to show or hide the annotation block with the right column. With its parent container (.Template2RightBig - right annotation) on pages that expand this page.

How can I do this with Jade power?

Answer 1

You can pass a variable from your child page to this template using a new block to conditionally control anything in this template.

_your-template.jade

extends _base
block content
  include ./partials/_main-header
  .Template2RightBig
    .container
      .row
        block content2RightBig
          block page-variables
          .col-md-3.Template2RightBig--left.column
            block left-column
          .col-md-9.Template2RightBig--right.column
            .Template2RightBig--right-header
              block right-column-header
            if rightAnnotationVisible === true
              .Template2RightBig--right-annotation
                block right-column-annotation
            block right-column
  include ./partials/_footer

_your-page.jade

extends _your-template

block page-variables
  - var rightAnnotationVisible = true
  //- annotation and parent wrapper will render

_your-other-page.jade

extends _your-template

block page-variables
  - var rightAnnotationVisible = false
  //- annotation and parent wrapper won't render

Just make sure the new block is included in the right place in the parent blocks.