I have written some JavaScript code with jQuery to create collapsible webparts in SharePoint 2010.
Can someone suggest some improvements? As I think that the methods I am using for selectors are not ideal. The solution works perfectly as it is, I just want to ensure that I am being as efficient as possible.
Below is a snippet of the HTML that I am doing the processing on.
UPDATE: Just a note, I am starting from s4-wpTopTable
because it is the best way for me to ensure I am dealing with a SharePoint webpart.
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="MSOZoneCell_WebPartWPQ4" valign="top" class="s4-wpcell" onkeyup="WpKeyUp(event)" onmouseup="WpClick(event)">
<table class="s4-wpTopTable" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr class="ms-WPHeader">
<td align="left" class="ms-wpTdSpace"> </td>
<td title="Links - Use the Links list for links to Web pages that your team members will find interesting or useful." id="WebPartTitleWPQ4" class="ms-WPHeaderTd">
<h3 style="text-align:justify;" class="ms-standardheader ms-WPTitle">
<a accesskey="W" href="/sites/test/Lists/Links"><nobr><span>Links</span><span id="WebPartCaptionWPQ4"></span></nobr></a>
</h3>
</td>
<td align="right" class="ms-WPHeaderTdMenu" onclick="OpenWebPartMenu('MSOMenu_WebPartMenu', this, 'WebPartWPQ4','False'); TrapMenuClick(event); return false;"><span style="display:none;"></span><div class="ms-WPMenuDiv" onmouseout="this.className='ms-WPMenuDiv'" onmouseover="this.className='ms-WPMenuDivHover'"><a onclick="OpenWebPartMenuFromLink('MSOMenu_WebPartMenu', this, 'WebPartWPQ4','False'); return false;" id="WebPartWPQ4_MenuLink" onkeydown="WebPartMenuKeyboardClick(document.getElementById('WebPartWPQ4_MenuLink'), 13, 40, event)" href="#" title="Links Web Part Menu" class="ms-wpselectlink" onblur="UpdateWebPartMenuFocus(this, 'ms-wpselectlink', 'ms-WPEditText');" onfocus="UpdateWebPartMenuFocus(this, 'ms-wpselectlinkfocus', 'ms-WPEditTextVisible');" menuid="MSOMenu_WebPartMenu"><img class="ms-WPHeaderMenuImg" src="/_layouts/images/wpmenuarrow.png" alt="Links Web Part Menu" style="border-width:0px;" /></a></div></td><td class="ms-WPHeaderTdSelection"><span class="ms-WPHeaderTdSelSpan"><input type="checkbox" id="SelectionCbxWebPartWPQ4" class="ms-WPHeaderCbxHidden" title="Select or deselect Links Web Part" onblur="this.className='ms-WPHeaderCbxHidden'" onfocus="this.className='ms-WPHeaderCbxVisible'" onkeyup="WpCbxKeyHandler(event);" onmouseup="WpCbxSelect(event); return false;" onclick="TrapMenuClick(event); return false;" /></span></td><td align="left" class="ms-wpTdSpace"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="" valign="top">
//CONTENT WILL BE IN HERE
</td>
</tr>
</table>
</td>
</tr>
</table>
And this is the jQuery that I am using:
<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>