I am a technical writer working to create a knowledgebase with Madcap Flare. I need my users to be able to select the version of the software that they are using so that I can serve the appropriate content.
I am using this guide: Version Filtering with Madcap Flare
Flare allows me to tag content during the writing process, then I can use JS to target those tags to dynamically hide/show content based on the users selection from the drop down by applying display="none" to all versions not selected. This all works but I am not able to have the most recent version preselected. On page load, all content is visible. If I use the item will be select in the drop down, but it doesn't do anything in terms of applying display="none" to all other versioned content. Any ideas?
< script type = "text/javascript" > /*<![CDATA[*/ function getElementsWithAttribute(attr) {
var elementsWithAttribute = [];
var elements = document.body.getElementsByTagName('*');
for (var i = 0; i < elements.length; i++) {
if (elements[i].getAttribute(attr)) {
elementsWithAttribute.push(elements[i]);
}
}
return elementsWithAttribute;
}
function showHideVersion() {
var elements = getElementsWithAttribute('data-mc-conditions');
var e = document.getElementById('version-select');
var selectedVersion = e.options[e.selectedIndex].value;
for (var i = 0; i < elements.length; i++) {
if (elements[i].getAttribute('data-mc-conditions').indexOf(selectedVersion) > -1) {
elements[i].classList.remove("hidden1");
localStorage.id = e.options[e.selectedIndex].value;
} else {
elements[i].classList.add("hidden1");
}
}
}
function myFunction() {
var elements = getElementsWithAttribute('data-mc-conditions');
var locals = localStorage.getItem('id');
if (locals == null) {
localStorage.id = "Default.V9";
locals = localStorage.getItem('id');
for (var i = 0; i < elements.length; i++) {
if (elements[i].getAttribute('data-mc-conditions').indexOf(locals) > -1) {
elements[i].classList.remove("hidden1");
document.getElementById('version-select').value = locals;
} else {
elements[i].classList.add("hidden1");
}
}
} else {
for (var i = 0; i < elements.length; i++) {
if (elements[i].getAttribute('data-mc-conditions').indexOf(locals) > -1) {
elements[i].classList.remove("hidden1");
document.getElementById('version-select').value = locals;
} else {
elements[i].classList.add("hidden1");
}
}
}
} /*]]>*/ < /script><div class="version-select">
<select id="version-select" onchange="showHideVersion()" width="100%">
<option value="Default.V8">Version 8</option>
<option value="Default.V9">Version 9</option>
</select>
</div>