none
hide/show webpart data on buttonclick using jquery

    Question

  • i am having buttons in left webpart and in body web part im having pageviwer webpart with data.when i click the button in left webpart i want hide the previous pageviwer data in body part and replace with button data. 
    Wednesday, April 24, 2013 12:28 PM

Answers

  • Just use below code.

    <script src="</script">http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
     $(document).ready(function () {
            $(".btnShowHideCSSClass").click(function(){
    alert('test');
      $('#MSOZoneCell_WebPartWPQ4').hide(); 
      $('#MSOZoneCell_WebPartWPQ6').show();
     });
        });</script><input id="showObj" accesskey="o" type="button" class="btnShowHideCSSClass" value="Objectives"/>


    Manoj | SharePoint

    • Marked as answer by ram86 Wednesday, May 01, 2013 9:07 AM
    Thursday, April 25, 2013 12:29 PM

All replies

  • For every webpart you use: $("div.[ID of webpart]").hide() or $("[ID of webpart]").show().

    On click button you call function and show/hide the webparts you want. This code you can set in a content editor web part

    You can find [ID of webpart] in the source.

    Wednesday, April 24, 2013 12:47 PM
  • Hi,

    Please take a look at the similar question. It shows the idea.

    _______________________

    Regards Michael (http://sp2013-blog.com)

    Please, don't forget to press upvote and mark as answer if appropriate.


    • Edited by MikhailSP Wednesday, April 24, 2013 1:18 PM
    Wednesday, April 24, 2013 1:16 PM
  • hi endeka,

    i tried with webpart id but not success.i placed my code belo.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script><script type="text/javascript">

        $(document).ready(function () {
            $("div.[WebPartWPQ4]").hide();
        });
            }</script>

    Wednesday, April 24, 2013 1:56 PM
  • Hi, you don't need to use the [ ], try $("div#WebPartWPQ4").hide();

    # is for an ID

    . is for a class

    Thursday, April 25, 2013 5:27 AM
  • Hi ram86,

    Please follow the steps below for show hide page viewer web part.

    - Add CSS Class name to your left web part's Show/Hide Button. (ex. "btnShowHideCSSClass" in my below code)

    - Then get you page viewer web part's ID using IE's developer tool bar. (ex. "MSOZoneCell_WebPartWPQ6" is ID for Page viewer web part in my web part page this id should be change in your page so please make sure with the page viewer web part ID)

    - Now add one content editor web part in your page and add below Javascript in content editor web part.

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
     $(document).ready(function () {
            $(".btnShowHideCSSClass").click(function(){
    		$('#MSOZoneCell_WebPartWPQ6').toggle(); // for Toggel (HIDE/Show) Page Viewer Web Part
    		//$('#MSOZoneCell_WebPartWPQ6').hide(); for only HIDE Page Viewer Web Part 
    	});
        });
    </script>

    Now check with button click.

    Let me know if any issue.

    Thanks,


    Manoj | SharePoint

    Thursday, April 25, 2013 6:28 AM
  • Hi Manoj i tried with your code but PVWP data is still displed. here is my code.

    <script src="</script">http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
     $(document).ready(function () {
            $(".btnShowHideCSSClass").click(function(){
      $('#MSOZoneCell_WebPartWPQ4').hide();
     });
        });</script><input id="showObj" accesskey="o" type="button" cssclass="btnShowHideCSSClass" value="Objectives"/>

    Thursday, April 25, 2013 8:32 AM
  • Ram,

    Add alert in above click event.

    <script src="</script">http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
     $(document).ready(function () {
            $(".btnShowHideCSSClass").click(function(){
    alert('test');
      $('#MSOZoneCell_WebPartWPQ4').hide(); 
     });
        });</script><input id="showObj" accesskey="o" type="button" class="btnShowHideCSSClass" value="Objectives"/>
    Note: Use class property insted of cssclass. 


    Manoj | SharePoint


    • Edited by Manoj SharePoint Thursday, April 25, 2013 9:34 AM
    • Marked as answer by ram86 Thursday, April 25, 2013 9:57 AM
    • Unmarked as answer by ram86 Thursday, April 25, 2013 12:17 PM
    Thursday, April 25, 2013 9:32 AM
  • thanx manoj its working fine now.
    Thursday, April 25, 2013 9:57 AM
  • Hi Manoj,

    with the below  jquery logic i am able to hide PVWP on button click but how to show another PVWP on same button click event.

    when i click Objectvies button i want to hide default PVWP(WebPartWPQ4) and show Objectvies data in PVWPWebPartWPQ6).

    Thursday, April 25, 2013 11:39 AM
  • Just use below code.

    <script src="</script">http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
     $(document).ready(function () {
            $(".btnShowHideCSSClass").click(function(){
    alert('test');
      $('#MSOZoneCell_WebPartWPQ4').hide(); 
      $('#MSOZoneCell_WebPartWPQ6').show();
     });
        });</script><input id="showObj" accesskey="o" type="button" class="btnShowHideCSSClass" value="Objectives"/>


    Manoj | SharePoint

    • Marked as answer by ram86 Wednesday, May 01, 2013 9:07 AM
    Thursday, April 25, 2013 12:29 PM
  • Ram,

    Is your issue solved ?


    Manoj | SharePoint

    Thursday, April 25, 2013 6:15 PM
  • Hi Manoj,

    its solved now, thanks for your help. 

    Friday, April 26, 2013 9:26 AM
  • Welcome Ram,

    Let me know if any other problem.

    Otherwise Mark as a Answer.

    Thanks,


    Manoj | SharePoint

    Friday, April 26, 2013 9:43 AM
  • The simplest way I have found is to use SharePoint Designer and add additional webpart zones for each webpart you want to show/hide.  Wrap these additional webpart zones in <div> tags.

    Using Animated Collapsible DIV v2.4 (see http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm#.UkH0LH9oVjg) set up groups to toggle your displayed webpart zones.

    You don't need to know any Webpart IDs, which are a pain in the @$$ to locate.

    Works like a charm for me!!!!

    Tuesday, September 24, 2013 8:48 PM