Hiding empty content - Accordion

[eddyR3]

Hey guys, hope you are well.

I have a template in CMSMS that uses bootstrap, and i have an accordion setup, for end user to enter some content when he/she is ready.

The problem is, the accordion is setup in such a way, that editing it/adding it would involve adding HTML codes! Which isnt really an option for computer illiterate people.

So, i had the idea of adding each FAQ section to a tab in the CMS, but, in doing so, any that are left blank still display the frame of the accordion.

Is there a way to hide div's if content isnt added?

This is my markup : (section of it)

Code: Select all

<div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          {content block="FAQ 1 Heading" tab="FAQ 1"}
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        {content block="FAQ 1 Content" tab="FAQ 1"}
      </div>
    </div>
  </div>

Lets say, for instance the FAQ 1 content isnt entered, is there a way to hide <div class="panel panel-default">...</div>? so it hides the whole div section?

Any suggestions would be most welcomed.

Many thanks
Eddy

[velden]

Of course there is:

Code: Select all

{content block="foo" assign="bar"}
...
{if $bar != ''}<div>{$bar}</div>{/if}

[eddyR3]

Hey thanks for the reply, it somewhat makes sense!

I have no idea on how to implement it though into hiding the class "panel panel-default"

Any further help? Or am i left to tinker with code? lol

Thanks again,
Eddy

[velden]

Code: Select all

{content block="FAQ 1 Heading" tab="FAQ 1" assign="faq_1_heading"}
{content block="FAQ 1 Content" tab="FAQ 1" assign="faq_1_content"}

{if $faq_1_content != ''}
<div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          {$faq_1_heading}
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
         {$faq_1_content}
      </div>
    </div>
  </div>
{/if}

That said, wouldn't it be possible to use another module for this. Like e.g. ListitExtended?

[eddyR3]

Hi Velden, many thanks for the speedy reply!

I will certainly try ListitExtended, if that doesnt offer the functionality i require, then i will deffinately use the code you offered!

Many thanks, and ill report back with an update asap!

Thanks again!