- Posts: 102
- Thank you received: 14
The place for more technical questions for those who want to create new pagetypes or bespoke functionality.
Accordion navigator in Bootstrap
- ymoore
-
- Offline
- Administrator
-
- ronm
-
- Offline
- Administrator
-
8 years 2 months ago #5105
by ronm
Xerte developer & trainer
e-learning & m-learning consultant
mitchellmedia.co.uk | xerteacademy.com | learningapps.co.uk
Note: Support here is voluntary and meant for users to support each other.
Need direct commercial support with Xerte? mitchellmedia.co.uk/contact/
Replied by ronm on topic Accordion navigator in Bootstrap
Hi Yvonne
are you using the code I posted earlier in this thread? That code was added to source view of a text element and would need to be edited if using a combination of text element and script element as in Neil's example.
Attached is a screenshot of a text element with the code added in source view. You could try this yourself e.g. add a new empty text element, switch to source view and paste the following:
In the tree that should look something like the attached screenshot.
HTH
Ron
are you using the code I posted earlier in this thread? That code was added to source view of a text element and would need to be edited if using a combination of text element and script element as in Neil's example.
Attached is a screenshot of a text element with the code added in source view. You could try this yourself e.g. add a new empty text element, switch to source view and paste the following:
Code:
<p>
</p>
<p><span style="font-size:16px;">Click each session title below for more information about each session or use the expand/collapse all option for a quick glance of all the session details.</span>
</p>
<p>
</p>
<p class="sessionToggleBtn"><strong><a href="javascript:void(0);" id="expandTxt" onclick="expand()">Expand all <i class="fa fa-caret-down"></i></a></strong>
</p>
<p>
</p>
<script type="text/javascript">
setTimeout(function() {
$(".accordion-body").removeClass("in");
}, 0);
var toggle = 0;
function expand() {
if (toggle == 0) {
$(".accordion-body").addClass("in").css("height", "");
$("#expandTxt").html("Collapse all <i class='fa fa-caret-up'></i>");
toggle = 1;
} else {
$(".accordion-body").removeClass("in");
$("#expandTxt").html("Expand all <i class='fa fa-caret-down'></i>");
toggle = 0;
}
}
</script>
<style type="text/css">.sessionToggleBtn a{
text-decoration:none;
padding:8px;
background:#f1f1f1;
}
}
</style>
HTH
Ron
Xerte developer & trainer
e-learning & m-learning consultant
mitchellmedia.co.uk | xerteacademy.com | learningapps.co.uk
Note: Support here is voluntary and meant for users to support each other.
Need direct commercial support with Xerte? mitchellmedia.co.uk/contact/
Please Log in or Create an account to join the conversation.
- ymoore
-
- Offline
- Administrator
-
- Fay
-
- Offline
- Elite Member
-
Moderators: JohnSmith
Time to create page: 0.136 seconds