Slide Menu script does not work in Spotfire 10

Hello,

I have a slide menu that uses javascript which works in version 7.12, but it doesn't work in Spotfire 10 due to the deprecated JQueryUI Javasript library in the new version 10. I tried following the instructions in this link (https://community.tibco.com/wiki/how-use-jquery-and-jqueryui-text-areas) but I am unable to get the slide menu to work. I am using the script below and I've also provided the .dxp that includes the script which works in version 7.12, but not in version 10. Please help and provide the updated script. If possible, please upload attached the .dxp to the post that has the updated script. Thank you in advance.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
.accordion {
    background-color: #d8181c;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: gray;
}

.accordion:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
    </style>
</head>
<body>
    <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>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: black;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: white;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: gold;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<span style="font-size:20px;cursor:pointer" onclick="openNav()">&#9776; MENU</span>


<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

<button class="accordion">Filter 1</button>
<div class="panel">
  <p></p><SpotfireControl id="45a8cd02ac5049ec9636a94248f8daf2" />
</div>

<button class="accordion">Filter 2</button>
<div class="panel">
  <p></p><SpotfireControl id="169998d9fb6246bf8321f9ccefd0e21e" />
</div>
    
</div>

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
</script>
     
</body>
</html> 



 

Attachments

AttachmentSize
Binary Data slidemenutest.dxp419.06 KB

(1) Answer

Login