0

I am working on an HTML web part. I wanted to make other web parts on the page to be collapsable and expandable. I found this script to place in an HTML form web part. It does exactly what I want. The only thing is all the other parts automatically are expanded when the page is loaded. I read through the script but, I am not familiar with jQuery syntax. The line in the code that I believe I need to change to make the sections automatically collapsed is:

$(this).closest('.s4-wpTopTable').find('tr:first').next().toggle().is(":visible") ? img.attr('src',Collapse) : img.attr('src',Expand );      

I believe I just need to change where it has toggle as visible to is not visible. I am not sure how to write that.

Here's the whole script:

<script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.7.1.min.js"></script> 
<script type="text/javascript"> 

jQuery(function($) {     
$('.s4-wpTopTable').find('tr:first h3').append('<a class=\'min\' 
style=\'float:right\'><img src=\'/_layouts/images/collapse.gif\'/></a>');         
var Collapse = "/_layouts/images/collapse.gif";         
var Expand = "/_layouts/images/expand.gif";    
$('.min').click(function(){              
var img = $(this).children();         
$(this).closest('.s4-wpTopTable').find('tr:first').next().toggle().is(":visible") ? img.attr('src',Collapse) : img.attr('src',Expand );     }); }); </script> 
Megan
  • 622
  • 1
  • 10
  • 16

1 Answers1

0

Here is trick may be it will work for you.Click on Edit Web part,Under Appearance find the chrome state, you need to set Chrome state to 'minimized',By default Chrome state will be 'Normal.

Then place your code either in CEWP or in your .aspx page using Sharepoint Designer.

Alex Kulinkovich
  • 4,408
  • 15
  • 46
  • 50