Spotfire Accordion Text Area - cannot reopen panels after collapsing
Question
I am using a text area in Spotfire to make an accordion for my filters so I can free up space. My code below will toggle to open and close the panel, and multiple at a time. However, I can only open and close each panel once and then it does not let me open a panel again until I edit the html and save it.
Also, I am trying to get a minus (-) sign to show up when the panel is opened and turn back into a plus when closed again.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .accordion:after { content: '\\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\\2796"; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } </style> </head> <body> <button class="accordion" style="font-size:medium" ;><b>Department Roles</b></button> <div class="panel"> <p> <SpotfireControl id="dca19548a0154f4582d1cc8c033f3ea6" /> </p> </div> <button class="accordion" style="font-size:medium" ;><b>Studies with Critical Activities</b></button> <div class="panel"> <p> <SpotfireControl id="228b526015ad4266946b65cad0a5d2dd" /> </p> </div> <button class="accordion" style="font-size:medium" ;><b>Study Status</b></button> <div class="panel"> <p> <SpotfireControl id="7a331814482e46bfb455f1cb06cdd569" /> </p> </div> <button class="accordion" style="font-size:medium" ;><b>Site</b></button> <div class="panel"> <p> <SpotfireControl id="dec00d7ee27244dc8f803190d2684b94" /> </p> </div> <button class="accordion" style="font-size:medium" ;><b>Outsourced</b></button> <div class="panel"> <p> <SpotfireControl id="44a7a79c5d1a497cb120ffe40b2a91cc" /> </p> </div> <button class="accordion" style="font-size:medium" ;><b>Planned Start</b></button> <div class="panel"> <p> <SpotfireControl id="39f882ba6a8f47a4b4257eff761d93e3" /> </p> </div> <button class="accordion" style="font-size:medium" ;><b>Actual Start</b></button> <div class="panel"> <p> <SpotfireControl id="f4fce188fc424d5cabc040b8eac977dd" /> </p> </div> <button class="accordion" style="font-size:medium" ;><b>Study Path</b></button> <div class="panel"> <p> <SpotfireControl id="c294b790054a4011aadaa89ee7ca36f1" /> </p> </div> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } </script> </body> </html>
1 answers
solution1
1 2020-02-08 06:13:22
You would want to have add the JavaScript to the Js section of the text area.
Also if html sanitation is on then the tags would not work either and would have to append using the Js in the text area.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.