Posting list items into code that varies

7 posts by 2 authors in: Forums > CMS Builder
Last Post: July 15, 2016   (RSS)

By superhappybunnycat - July 14, 2016

I have a FAQ page that is setup using the default CMSB list.

I want to present the list in an accordian, however the code changes slightly for every single tab. Is this possible while still generating the FAQs as a list?

<h3 class="text-center">ACCORDION</h3>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="collapse collapsed">Toggle panel Item #1</a>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" style="height: 0px;">
<div class="panel-body">
<small>CONTENT 1</small>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapse collapsed">Toggle panel Item #2</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<small>CONTENT 2</small>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="collapse collapsed">Toggle panel Item #3</a>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<small>CONTENT 3</small>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour" class="collapse collapsed">Toggle panel Item #4</a>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<small>CONTENT 4</small>
</div>
</div>
</div>
</div>

By Toledoh - July 14, 2016

That looks like a standard bootstrap accordion to me?  If so, so this code - just match your field names:

<?php

// load records from 'facts'
list($factsRecords, $factsMetaData) = getRecords(array(
'tableName' => 'facts',
'loadUploads' => true,
'allowSearch' => false,
));

?>
<?php $count = 0 ?>
<div class="panel-group" id="accordion">
<?php foreach ($factsRecords as $record): ?>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color: #000;">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo htmlencode($record['num']) ?>">
<?php echo htmlencode($record['title']) ?>
</a>
</h4>
</div>
<div id="collapse<?php echo htmlencode($record['num']) ?>" class="panel-collapse collapse<?php if (!$count): ?> in<?php $count++ ?> <?php endif ?> ">
<div class="panel-body">
<?php echo htmlencode($record['content']) ?>
</div>
</div>
</div>
<?php endforeach ?>
</div>

Cheers,

Tim (toledoh.com.au)

By superhappybunnycat - July 15, 2016

Excellent thank you! Great idea to use the number field for the variable.

Only issue I am seeing now is the answer content is showing <p> <span style="color: #00ccff;"> etc within it instead of changing the style of the text. Is there any reason this is happening?

By Toledoh - July 15, 2016

Nah - that's just my stuff up.  Just delete it.

Cheers,

Tim (toledoh.com.au)

By superhappybunnycat - July 15, 2016

From where though? It's not coming from your code. The answer field is a WYSIWYG field - it's coming from CMSB

By superhappybunnycat - July 15, 2016

That did the trick! Thanks so much for your help with this :)