The Goal is if I choose to HIDE a WebPart, I would like that WebPart to remain HIDDEN until I manually click the SHOW button, regardless if the page is refreshed or not.

This is the script that I'm using, which dynamically shows/hides Web Parts when the btnShow or btnHide are clicked. Any help is appreciated and thanks!

<a href="#"><img src="/SiteAssets/elements/images/eye-invisible.png" accesskey="o" type="button" id="hideObj" class="btnHideObj" title="Click here to HIDE the List" style="height:33px; width: 33px;"></a>
<a href="#"><img src="/SiteAssets/elements/images/eye-visible.png" accesskey="o" type="button" id="showObj" class="btnShowObj" title="Click here to SHOW the List" style="height:33px; width: 33px;"></a>

<script type="text/javascript">
$(document).ready(function () {
    $(".btnHideObj").show()
    $('#MSOZoneCell_WebPartWPQ1').show();
    $('#MSOZoneCell_WebPartWPQ2').show();

    $(".btnHideObj").click(function(){
        $(".btnHideObj").hide()
        $(".btnShowObj").show()
        $('#MSOZoneCell_WebPartWPQ1').hide();
        $('#MSOZoneCell_WebPartWPQ2').hide();
    });
    $(".btnShowObj").click(function(){
        $(".btnHideObj").show()
        $(".btnShowObj").hide()
        $('#MSOZoneCell_WebPartWPQ1').show();
        $('#MSOZoneCell_WebPartWPQ2').show();

    });
});
</script>
  • So if the WebPart is Visible and you reload the page it should remain its (visible) state? – Danny '365CSI' Engelman Jun 7 '17 at 15:02
  • That's correct. It should only be hidden when I manually click the HIDE button. – TheJDScott Jun 7 '17 at 15:18
up vote 1 down vote accepted

you can use sessionStorage to store a value that indicates wether to hide or to show webparts, and your code will be :

<a href="#"><img src="/SiteAssets/elements/images/eye-invisible.png" accesskey="o" type="button" id="hideObj" class="btnHideObj" title="Click here to HIDE the List" style="height:33px; width: 33px;"></a>
<a href="#"><img src="/SiteAssets/elements/images/eye-visible.png" accesskey="o" type="button" id="showObj" class="btnShowObj" title="Click here to SHOW the List" style="height:33px; width: 33px;"></a>

<script type="text/javascript">
    $(document).ready(function () { 
        $(".btnShowObj").show();

        if(sessionStorage.getItem("Show") == "false")
        {
            $(".btnHideObj").hide();
            $(".btnShowObj").show();
            $('#MSOZoneCell_WebPartWPQ1').hide();
            $('#MSOZoneCell_WebPartWPQ2').hide();
        }

        $(".btnHideObj").click(function(){
            sessionStorage.setItem("Show", "false");
            $(".btnHideObj").hide();
            $(".btnShowObj").show();

            $('#MSOZoneCell_WebPartWPQ1').hide();
            $('#MSOZoneCell_WebPartWPQ2').hide();
        });
        $(".btnShowObj").click(function(){
            sessionStorage.setItem("Show", "true");

            $(".btnHideObj").show();
            $(".btnShowObj").hide();
            $('#MSOZoneCell_WebPartWPQ1').show();
            $('#MSOZoneCell_WebPartWPQ2').show();

        });
    });
</script>
  • Solved this -- thanks so much. – TheJDScott Jun 7 '17 at 16:52

No need for long jQuery scripts,

HTML5 has the hidden attribute for DOM elements:

Hide:

document.getElementById('#MSOZoneCell_WebPartWPQ2').setAttribute('hidden','');

Show:

document.getElementById('#MSOZoneCell_WebPartWPQ2').removeAttribute('hidden');
  • Solved, as well thanks! – TheJDScott Jun 7 '17 at 16:52

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.