1

I am trying to show/ hide set of web parts on click. I already wrote the coding and I can hide/show web parts one by one on click and the reason is that each web part has unique Id. Now I am facing with problem because I cannot hide 6 web part together on click and show 6 others. I tried to add different to a wiki page in SharePoint. so I can add 6 web part to each of them and then I have one id for each set, but it didn't work! If someone can help me how to reach "one" ID for set of web parts in SharePoint I would appreciate.

This is my JavaScript coding for each web part and it works well but too long!:

function showhideReport(){
 var div =document.getElementById('WebPartWPQ9')
 div.style.display=(div.style.display=="none") ? "block" : "none";
 if(document.getElementById('WebPartWPQ3').style.display=="block")
 document.getElementById('WebPartWPQ3').style.display="none";
 if(document.getElementById('WebPartWPQ10').style.display=="block")
 document.getElementById('WebPartWPQ10').style.display="none";
 if(document.getElementById('WebPartWPQ4').style.display=="block")
 document.getElementById('WebPartWPQ4').style.display="none";
 if(document.getElementById('WebPartWPQ5').style.display=="block")
 document.getElementById('WebPartWPQ5').style.display="none";
 if(document.getElementById('WebPartWPQ13').style.display=="block")
 document.getElementById('WebPartWPQ13').style.display="none";

}

Thank you

Improve this question

4 Answers 4

Reset to default
2

Tnx, I had some fun with your question, applying an OOP approach

Paste as snippet in Chrome Controls: 

function DIVManager( selector , numbers){
    var manager=this;
    function DIV(element){
        var div=this;
        div.state=element.style.display!=='none';
        div.style=function(key,value){
            element.style[key]=value;
            div.state=element.style.display!=='none';
        }
        div.show = div.style.bind(this,'display','block')
        div.hide = div.style.bind(this,'display','none')
        div.toggle=function(){
            div.state ? div.hide() : div.show();
            div.state=!div.state;
        }
    }
    manager.divs=[];
    manager.numbers=[];
    document.querySelectorAll(selector).forEach(function(element,nr){
        manager.numbers.push(nr);
        manager.divs.push(new DIV(element));
    });
    function action (){
        var args = Array.prototype.slice.call(arguments);
        if(args.lenght===1)args=manager.numbers;
        manager.divs.forEach(function(element,nr){
            console.log(nr,element);
            if(args.indexOf(nr)>-1) element[args[0]]();
        });
    }
    manager.show=action.bind(this,'show');
    manager.hide=action.bind(this,'hide');
    manager.toggle=action.bind(this,'toggle');
}
var wpM=new DIVManager("div[webpartid]");
wpM.hide(1,3,5);
wpM.toggle(1);
var searchBox=wpM.divs[0];
searchBox.style('zoom',3);
searchBox.style('backgroundColor','pink');
searchBox.style('opacity',.7);
var rotation=0;
window.setInterval(function(){
      searchBox.style( 'transform',String.format("rotate({0}deg)",rotation++ ));
}, 10);
Improve this answer
1
  • Thanks for answer! I am happy if it was interesting for you! I hope to learn coding such as yours! it is very useful in SharePoint!
    – Shaghayegh
    Apr 6, 2016 at 14:42
4

Address the web parts by giving them a common class and then use the following:

document.getElementsByClassName

Instead of 

document.getElementById
Improve this answer
1
  • How do I add a custom class name to web parts? I can't seem to find an answer to this anywhere.
    – Eric K
    Oct 31, 2018 at 14:45
3

You can use jQuery's starts-with selector:

jQuery( "[attribute^='value']" )

i.e. to hide / unhide webparts:

jQuery( "[id^='WebPartWPQ']" ).each(function() {
  jQuery(this).toggle();
});

https://api.jquery.com/attribute-starts-with-selector/

Improve this answer
2
  • Thanks it works for each web part. do you know how can I have one ID from 6 web part? how can I put them in one div so I can do same coding as you said? just like something that BellZBob said above?
    – Shaghayegh
    Apr 4, 2016 at 9:42
  • You can use "div[id^='WebPartWPQ']" as a selector and it will not matter where on the page they are, it will just get every div with an ID starting with WebPartWPQ
    – Colin
    Apr 4, 2016 at 15:34
0

Please do f12 in browser and check your webpart id. It will add prefix automatically like "MSOZoneCell_WebPartWPQ3". Please pass webpart id with prefix in javascript and test it again.

Improve this answer
1
  • Thanks for answer but I already did it. My problem is to have one ID from 6 web part which got solve with answers above!
    – Shaghayegh
    Apr 4, 2016 at 9:47

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.