Show/Hide Pages with a Button

in , ,  
A friend from Community asked for a Button to toggle visibility of a Spotfire page.  
So, this post is about same 😎
Lets Start -


  1. Create a button in TextArea with id Hider. If you are suffering from HTML Sanitization, you can use my alternative code. This one re-purposes span as button 😜
    <span id="Hider" style="background-color:chocolate;
    color:white;
    display:inline-block;
    border: 1px solid rgb(128,128,128);
    border-radius : 8px;
    padding     : 8px;
    line-height : 24px;
    text-shadow : 0 0 2px black;
    font-size:larger;
    margin:5px;
    cursor: pointer;">Toggle Visibility
    </span>
  2. Add below JavaScript to TextArea. Here [1] is page index of Second page. You can adjust it as you need.
    $('#Hider').click(function(){
    var state =$('.sf-element-page-tab')[1].style.display;
    console.log(state);
    if(state =='none') {
    $('.sf-element-page-tab')[1].style.display = "";}
    else{$('.sf-element-page-tab')[1].style.display = "none";}
    });
  3. Save TextArea and you are done ✅
This is a Before vs After comparison of Page Navigation Area -

Share: