Hide & Show Panel Stack Using JQuery in MSTR

Hello Friends..
Here,you can see how to hide and show the panel stack with the use of JQuery. Currently mstr haven't provided any feature to have a panel selector with use of images.
So, Is it possible to do in MSTR without using URL API.
Yes, we can do one work around to have a image as panel selector using JQuery.

So, here I am going to show you, how you can use JQuery to make a panel selector with use of images.

These approach will going to work only in "Interactive" and "Express" Mode (not in flash mode) in 9.4 Version.I have checked it in 10.x also and it is working like a charm.

So, here you go:

1) In design mode, you insert two panel stack and one HTML container.

2) In express mode we can't use Id or class name of the panel stack because Id is not static, it changes continuously at a run time and class name for all panel stack is same.So, we can't differentiate panel stack with there Id and class name.So,with the use of "title" we can do this and for that, go to properties and formatting and give first panel stack tool-tip name as "1stpanel" and second panel stack tool-tip name as "2ndpanel".

But In Interactive mode I'd doesn't change on every execution.So, you can use only one panel stack and different panel's inside that panel stack and to get different Id for panel's go to chrome dev tool


3)Now, Inside the HTML container you have to past the following code.In Express mode It doesn't know what is "$" property i.e JQuery property.So, you will get an error.To avoid that error you have to embed jquery file to the mstr load page.
Use below code:

<script>
var script = document.createElement('script');
script.src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js";
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

setTimeout(function(){

  $("div[title~='2ndpanel']").hide();
    $("#hello").click(function(){
    $("div[title~='2ndpanel']").hide();
    $("div[title~='1stpanel']").show();
    });
     $("#hi").click(function(){
    $("div[title~='1stpanel']").hide();
    $("div[title~='2ndpanel']").show();
    });
}, 3000);

</script>
<input id="hello" type="image" src="http://imageog.flaticon.com/icons/png/512/25/25694.png?size=1200x630f&pad=10,10,10,10&ext=png&bg=FFFFFFFF" value="show 1st Panel" width="48" height="48">
<input id="hi" type="image" src="http://simpleicon.com/wp-content/uploads/setting2.png" value="show 2nd panel" width="48" height="48">

4)Finally you run the dashboard in express mode and you will get something like below screen.

Hopefully this will help you in you real Dashboard Development.