Bootstrap Collapse
5 posts by 2 authors in: Forums > CMS Builder
Last Post: August 17, 2016 (RSS)
Hi
I am trying to use Bootstrap Collapse with a CMSB multiple record editor. Below is the original code for the Bootstrap Collapse:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Accordion Example</h2>
<p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here is my code:
<?php include 'common/includes/php_header.inc'; ?>
<?php
// load records from 'training_resources'
list($training_resourcesRecords, $training_resourcesMetaData) = getRecords(array(
'tableName' => 'training_resources',
'loadUploads' => true,
'allowSearch' => false,
));
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="assets/images/air-cadet-league-300x332-73.png" type="image/x-icon">
<meta name="description" content="">
<title>SSC Resources</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:700,400&subset=cyrillic,latin,greek,vietnamese">
<link rel="stylesheet" href="assets/iconfont-plugin/bootstrap-material-design-font.css">
<link rel="stylesheet" href="assets/bootstrap-material-design-font/css/material.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/socicon/css/socicon.min.css">
<link rel="stylesheet" href="assets/mobirise/css/style.css">
<link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css" type="text/css">
</head>
<body>
<section class="mbr-navbar mbr-navbar--freeze mbr-navbar--absolute mbr-navbar--sticky mbr-navbar--collapsed" id="menu-44">
<div class="mbr-navbar__section mbr-section">
<div class="mbr-section__container container">
<div class="mbr-navbar__container">
<div class="mbr-navbar__column mbr-navbar__column--s mbr-navbar__brand">
<span class="mbr-navbar__brand-link mbr-brand mbr-brand--inline">
<span class="mbr-brand__logo"><a href="index.html"><img class="mbr-navbar__brand-img mbr-brand__img" src="assets/images/air-cadet-league-300x332-73.png" alt="BCPC"></a></span>
<span class="mbr-brand__name"><a class="mbr-brand__name text-white" href="https://bc-aircadetleague.com">BC Provincial Committee - Air Cadet League<br></a></span>
</span>
</div>
<div class="mbr-navbar__hamburger mbr-hamburger text-white"><span class="mbr-hamburger__line"></span></div>
<div class="mbr-navbar__column mbr-navbar__menu">
<?php include 'common/includes/menu-2.inc'; ?>
</div>
</div>
</div>
</div>
</section>
<section class="mbr-section mbr-section--relative mbr-section--fixed-size mbr-after-navbar" id="content4-43" style="background-color: rgb(41, 105, 176);">
<div class="mbr-section__container mbr-section__container--std-top-padding mbr-section__container--sm-bot-padding mbr-section-title container">
<div class="mbr-header mbr-header--center mbr-header--wysiwyg row">
<div class="col-sm-8 col-sm-offset-2">
<h3 class="mbr-header__text">SSC Resources</h3>
</div>
</div>
</div>
<div class="mbr-section__container container">
<div class="mbr-section__row row">
<div class="mbr-section__col col-xs-12 col-sm-12">
<div class="mbr-section__container mbr-section__container--middle">
<div class="mbr-header mbr-header--reduce mbr-header--center mbr-header--wysiwyg">
<h3 class="mbr-header__text"></h3>
</div>
</div>
<div class="mbr-section__container mbr-section__container--last">
<div class="mbr-article mbr-article--wysiwyg">
<div class="container">
<div class="panel-group" id="accordion">
<?php foreach ($training_resourcesRecords as $record): ?>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse"+"<?php echo htmlencode($record['num']) ?>"></a>
<?php echo htmlencode($record['title']) ?></h4>
</div>
<div id="'collapse'+'<?php echo htmlencode($record['num']) ?>'" class="panel-collapse collapse in">
<div class="panel-body">
<?php echo $record['content']; ?>
</div>
</div>
</div>
<?php endforeach ?>
</div>
</section>
<?php include 'common/includes/footer.inc'; ?>
<script src="assets/web/assets/jquery/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="assets/smooth-scroll/SmoothScroll.js"></script>
<script src="assets/mobirise/js/script.js"></script>
</body>
</html>
Basically, the records are displayed, with the Bootstrap Collapse open, and not collapsed as it should be. I believe the issue may be the code in blue above.
Ragi
northernpenguin
Northern Penguin Technologies
"Any sufficiently advanced technology
is indistinguishable from magic."
........Arthur C. Clarke
By Damon - August 17, 2016
Hi,
It looks like the reason everything is open is because of "in".
<div id="'collapse'+'<?php echo htmlencode($record['num']) ?>'" class="panel-collapse collapse in">
This sets it as open so should only apply to the first record.
Here is some code using a $counter. If the $counter equals one, then I set a variable to open the Collapse menu and if it isn't one then I unset it.
Also, since I'm using a $counter anyway, I just use that in the IDs.
<?php $counter = 1; ?>
<?php foreach ($sample_multi_recordRecords as $record): ?>
<?php if($counter ==1) { $defaultOpen = "in"; } ?>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $counter; ?>"><?php echo htmlencode($record['title']) ?></a>
</h4>
</div>
<div id="collapse<?php echo $counter; ?>" class="panel-collapse collapse <?php echo @$defaultOpen; ?>">
<div class="panel-body"><?php echo $record['content']; ?></div>
</div>
</div>
<?php $defaultOpen = ""; ?>
<?php $counter++; ?>
<?php endforeach; ?>
Hopefully this helps!
Damon Edis - interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
Damon: That worked great, except that the default has all the accordions open. Is there anyway to set them such that the first one is open and the others closed ?
northernpenguin
Northern Penguin Technologies
"Any sufficiently advanced technology
is indistinguishable from magic."
........Arthur C. Clarke
By Damon - August 17, 2016
Hi,
My code works for me. Only the first accordian is open, the others closed by default.
Are you resetting the $defaultOpen variable at the end of the foreach loop?
<?php $defaultOpen = ""; ?>
Damon Edis - interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
I must have inadvertently deleted <?php $counter++; ?>
It works now.
Thanks Damon!
northernpenguin
Northern Penguin Technologies
"Any sufficiently advanced technology
is indistinguishable from magic."
........Arthur C. Clarke