B i t s O f S h a r e P o i n t C o n s u l t i n g L L C > ExamplePoint > Site > ListExpandTextField  

Web Part Page Title Bar image
List Collapse/Expand Text Field

 Examples
Expand/Collapse M E N U (click) : Examples ‎(21)

 Issues
Sort by AttachmentsUse SHIFT+ENTER to open the menu (new window).
DescriptionFilter
1
Issue Number 1Use SHIFT+ENTER to open the menu (new window).
ksadfj lkjsdfkj fdsalkjsd ldkjsadkfj asdflkjds fqpoweuqpowre lkjsadfkjaspqowe jlsakdfj qpoewrjfdlakd
jflasdfpwqrepowlksajdf alskdjfqpwoeurpqowelaksjfd laks jf alsdfwqierpowielkasjdf sldkjf pweoripwoeirlksajdf lkasdflk pwoeir lakdsjf salksdrpwefrpoiwfjsaldkf lsakdjf aldskfj
 
lfdslkj lksadjfaeprjfdj alskdjflkasjdf   lkjljdsflkajsfd lsakjdf laskjdf lalksjdflksa  lksjdflkasdflkjaf f lksadflkjafds saldkfj   lskjdf ladskfjasfdlkj lkjdsaf a lkjdsflkjsafd  lsakdjf sa lkjfdslkjasdf  alkjsafdkj alkjsadf aslasdkjf dsflksajd f fs
laksjdf laksdjf alkjfd saldkfj lkfj asdlkj sadflkjas fd
 
lksdf;lk adflksdf;lkas dlkfja lkdfj alkdjf alskdjf alskdjflsakdjf alskdjf alskdjf a j
 
laksdjf laksjfd laksjfd laksjfd lakdsjf alskdfj lkj
asdf
askdjf alskdjf lakjfd lakdsjf lsakdjflaskdjf laskdjf
 
alskdjf lkasjfd alkdsfj aldskfj asdlkf j
  • dslf;lasdkf ;lakdsf;l kasdfkj aslkfdj a
  • sadlkfj alskdfj alkdsfj alkdsf j
  • aslkfdjaslkdfjalskdjlkdsf j
  • as'lkdfjalskdfj alskdfj

lksdjf laksdjf alksdfj alskdfja'sl kdjas'ld ja'ldskfj 'lkdsa jfa'lkds jas jfa'lkds jalkfd jlkfdj kjf

  1. dslkfja sldkfjas lfdkja fdlkjdsa f
  2. asdlkfja dlkjad lkj fd
  3. aslkdjfalkdfj a;lkdfj asdlkfj
  4. lksajfd laks jf
2
Issue Number 2Use SHIFT+ENTER to open the menu (new window).
dkljf adflkjas dskd  sdlkfj sadlkj afkjasd f jasdf jsadlkf jlka jdsflka jdsflk jafdlkjasdlk jfalk fdlak jdflka dflkja dsflka jfdlka dflksa jflaksd flak flk jlkjdsf lkasjdf asldkfjsalk jsaldjfsadl jfasld jfalsd jf sasadlkfj salkjf lkas jfdlsadk jflaskd jfalkj flk jadflka jflksad flaskdjfasldkjf laskd jflkasdf ald jdsalkf jalds kfj
 
 lsakdj falskdjf asldkfj alsdkjf lkjdsf lkjsadf asldkf jlkdsf asldkfj ldskjf asldkjf lsadk jfalds jflasdk jflsakd jfalsdk flkjsadflkj asdlkasdf jasldkjf sadlkj sdflkjasdf as dflkj dlsadfkja sdflkasd jf alkj sadflkj flkj dsflkajsd flkajds fas
 
lkj lsakdjflkasjfd sadlkjf alkjdslkjsadf ladslkj asdlfkjasdlfkj adslfkjasd flkj dslkjdsaflk jasdlfkjas dflkjsadfl ksadjf asdlkjf lkdsajf asldkjf salkdjf laskdf jasdflkj dsflkas jfdlaksdjf 
3
Issue Number 3Use SHIFT+ENTER to open the menu (new window).
asdkjfalskdjflksajdflkajsdf lkasdlkfj lkj sadlkfja sdlk
 
alksdjlksjdf askldfj aslkd jskd f
df'aksdjf laskdfj
 
 
alkdfj alskdfjlksdfj askdlfjasd'fa
sdfjasdl;fjks

Here is the solution and code that Paul Grenier put together.

UPDATE: 5/21/2010

JGil asked on Paul Grenier's article JQuery for Everyone: Collapse Text in List View, can the text change when you expand and collapse your view of the text.  An the answer is yes.  I have updated my code to reflect this.  Again go to Paul's article and capture his code and then replace part of the code with mine.  Essential you will be replacing the function called collapseText(group).

I made additional changes so that there is text after the icon that is clickable. This will give the user a better queue as to what this feature will do for them. You can updated Paul's code with my changes below.

  1. First get the original code by clicking on "Click to View Code":
  2. Second change out the code section with the code below.
  3. Add to a CEWP

Code Updated: 05/21/2010

Switch out the below code:

function collapseText(group){
 if (!group) group = "#MSO_ContentTable";
var html = "<img rell='collapseText' alt='Collapse/Expand Text' style='cursor:pointer;' src='/_layouts/images/menudark.gif'/><b  rell='collapseText' title='Collapse/Expand Text' style='font-size: 9px; font-color:black;cursor:pointer;'>Expand Full Text</b>";
 $(group+" td.ms-vb2>div:has(>div)").toggleClass("collapseText").prepend(html);
 $(group+" [rell='collapseText']").click(function(event){
var checkExpand = $(this).text();
  $(event.target).parent().toggleClass("collapseText");
                if( checkExpand == 'Expand Full Text' ){
                 $(this).text('Collapse Full Text');
                
                 end;
                 } else {
                 if( checkExpand = 'Collapse Full Text' ){
                 $(this).text('Expand Full Text');

                 }}
 });
} 

Click to View Code | Click to Open Site