cleaned up js toggle function and moved to asset info partial

This commit is contained in:
bill bittner 2018-01-24 16:24:44 -08:00
parent 98ce165c7b
commit 6225e195f8
2 changed files with 26 additions and 26 deletions

View file

@ -39,25 +39,6 @@ function postRequest (url, params) {
}) })
} }
function toggleSection(event){
event.preventDefault();
var dataSet = event.target.dataset;
var status = dataSet.open;
var masterElement = document.getElementById(event.target.id||event.srcElement.id);
var slaveElement = document.getElementById(dataSet.slaveelementid);
var closedLabel = dataSet.closedlabel;
var openLabel = dataSet.openlabel;
if (status === "false") {
slaveElement.hidden = false;
masterElement.innerText = openLabel;
masterElement.dataset.open = "true";
} else {
slaveElement.hidden = true;
masterElement.innerText = closedLabel;
masterElement.dataset.open = "false";
}
}
function createProgressBar(element, size){ function createProgressBar(element, size){
var x = 0; var x = 0;
var adder = 1; var adder = 1;

View file

@ -50,7 +50,7 @@
</div> </div>
<div id="show-share-buttons"> <div id="show-share-buttons">
<div class="row row--padded row--wide"> <div class="row row--padded row--no-bottom row--wide">
<div class="column column--2 column--med-10"> <div class="column column--2 column--med-10">
<span class="text">Share:</span> <span class="text">Share:</span>
</div><div class="column column--7 column--med-10"> </div><div class="column column--7 column--med-10">
@ -64,14 +64,10 @@
</div> </div>
</div> </div>
<div class="row row--wide"> <div id="show-details" class="row row--padded row--no-bottom row--wide" hidden="true">
<a class="text link--primary" id="show-details-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-openlabel="[less]" data-closedlabel="[more]" data-slaveelementid="show-details">[more]</a>
</div>
<div id="show-details" class="row row--padded row--wide" hidden="true">
<div id="show-claim-name"> <div id="show-claim-name">
<div class="column column--2 column--med-10"> <div class="column column--2 column--med-10">
<span class="text">Name:</span> <span class="text">Claim Name:</span>
</div><div class="column column--8 column--med-10"> </div><div class="column column--8 column--med-10">
{{claimInfo.name}} {{claimInfo.name}}
</div> </div>
@ -95,3 +91,26 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row row--padded row--no-bottom row--wide">
<a class="text link--primary" id="show-details-toggle" href="#" onclick="toggleSection(event)" data-status="closed">[more]</a>
</div>
<script>
function toggleSection(event){
event.preventDefault();
var dataSet = event.target.dataset;
var status = dataSet.status;
var toggle = document.getElementById("show-details-toggle");
var details = document.getElementById("show-details");
if (status === "closed") {
details.hidden = false;
toggle.innerText = "[less]";
toggle.dataset.status = "open";
} else {
details.hidden = true;
toggle.innerText = "[more]";
toggle.dataset.status = "closed";
}
}
</script>