Posting list items into code that varies
7 posts by 2 authors in: Forums > CMS Builder
Last Post: July 15, 2016 (RSS)
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>
Tim (toledoh.com.au)
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.
Tim (toledoh.com.au)
From where though? It's not coming from your code. The answer field is a WYSIWYG field - it's coming from CMSB
By Toledoh - July 15, 2016
Sorry - just change <?php echo htmlencode($record['content']) ?> to <?php echo ($record['content']) ?>
Also, remove the extra styling here: <h4 class="panel-title" style="color: #000;">
Tim (toledoh.com.au)