Hello there,
I would like to share this implementation that I did for mobile devices. In this case, I had to create a custom radio button using an HTML Container with CSS and JavaScript to change the panels of a panel stack.
The trick is to create anchors with your URL API parameters to change the panels based on the click of the radio button.
I have one function per button in this case, but you can improve it to use only one.
You just need to create an HTML Container and past this code below:
<!DOCTYPE html> <html lang="en-gb"> <head> <meta charset="UTF-8"> <style> .buttons{ margin-bottom : 1.5em; } input[type=radio ]:not(old){ width : 2em; margin : 0; padding : 0; font-size : 1em; opacity : 0; } input[type=radio ]:not(old) + label{ display : inline-block; margin-left : -2em; line-height : 1.5em; } input[type=radio ]:not(old) + label > span{ display : inline-block; width : 0.875em; height : 0.875em; margin : 0.25em 0.5em 0.25em 0.25em; border : 0.0625em solid rgb(192,192,192); border-radius : 0.25em; background : rgb(224,224,224); background-image : -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224)); background-image : -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224)); background-image : -o-linear-gradient(rgb(240,240,240),rgb(224,224,224)); background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224)); background-image : linear-gradient(rgb(240,240,240),rgb(224,224,224)); vertical-align : bottom; } input[type=radio ]:not(old):checked + label > span{ background-image : -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240)); background-image : -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240)); background-image : -o-linear-gradient(rgb(224,224,224),rgb(240,240,240)); background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240)); background-image : linear-gradient(rgb(224,224,224),rgb(240,240,240)); } input[type=radio]:not(old):checked + label > span > span{ display : block; width : 0.5em; height : 0.5em; margin : 0.125em; border : 0.0625em solid rgb(115,153,77); border-radius : 0.125em; background : #000; } </style> <script> function clickLvl() { var event = document.createEvent('MouseEvent'); event = new CustomEvent('click'); var a = document.getElementById('lvlLink'); a.dispatchEvent(event); } function clickVP() { var event = document.createEvent('MouseEvent'); event = new CustomEvent('click'); var a = document.getElementById('vpLink'); a.dispatchEvent(event); } function clickDivision() { var event = document.createEvent('MouseEvent'); event = new CustomEvent('click'); var a = document.getElementById('divisionLink'); a.dispatchEvent(event); } function clickDepartment() { var event = document.createEvent('MouseEvent'); event = new CustomEvent('click'); var a = document.getElementById('departmentLink'); a.dispatchEvent(event); } function clickClass() { var event = document.createEvent('MouseEvent'); event = new CustomEvent('click'); var a = document.getElementById('classLink'); a.dispatchEvent(event); } </script> </head> <body> <a id="lvlLink" href="mstr://?evt=2048076&psName=ttl|comp&pName=Panel3531|Panel3531"></a> <a id="vpLink" href="mstr://?evt=2048076&psName=ttl|comp&pName=Panel3535|Panel3535"></a> <a id="divisionLink" href="mstr://?evt=2048076&psName=ttl|comp&pName=Panel3534|Panel3534"></a> <a id="departmentLink" href="mstr://?evt=2048076&psName=ttl|comp&pName=Panel3533|Panel3533"></a> <a id="classLink" href="mstr://?evt=2048076&psName=ttl|comp&pName=Panel4483|Panel4431"></a> <div class="buttons"> <div> <input id="radio1" type="radio" name="radio" value="1" checked="checked" onclick="clickLvl()"><label for="radio1"><span><span></span></span>Button 1</label></div> <div> <input id="radio2" type="radio" name="radio" value="2"><label for="radio2" onclick="clickVP()"><span><span></span></span>Button 2</label></div> <div> <input id="radio3" type="radio" name="radio" value="3"><label for="radio3" onclick="clickDivision()"><span><span></span></span>Button 3</label></div> <div> <input id="radio4" type="radio" name="radio" value="4"><label for="radio4" onclick="clickDepartment()"><span><span></span></span>Button 4</label></div> <div> <input id="radio5" type="radio" name="radio" value="5"><label for="radio5" onclick="clickClass()"><span><span></span></span>Button 5</label></div> </div> </body> </html>
Each input is a different radio button.
Just let me know if you need help with this code.
Hope it helps.
God bless you!