1

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
1

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>
1

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');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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