I was just wondering how i'd add opacity, so the background dims out a bit when the box opens? The javascript I have is:

2. $(document).ready(function(){
3. /* The code here is executed on page load */
5. /* Replacing all the paragraphs */
6. $('.main p').replaceWith(function(){
7.  
8.  
10. /* The style, class and title attributes of the p are copied to the slideout: */
12. return '\
13. <div class="slideOutTip '+$(this).attr('class')+'" style="'+$(this).attr('style')+'">\
14. \
15. <div class="tipVisible">\
16. <div class="tipIcon"><div class="plusIcon"></div></div>\
17. <p class="tipTitle">'+$(this).attr('title')+'</p>\
18. </div>\
19. \
20. <div class="slideOutContent">\
21. <p>'+$(this).html()+'</p>\
22. </div>\
23. </div>';
24. });
25. 
    
26. $('.slideOutTip').each(function(){
29. 
    
30. /*
31. Implicitly defining the width of the slideouts according to the width of its title,
32. because IE fails to calculate it on its own.
33. */
35. $(this).width(40+$(this).find('.tipTitle').width());
38. });
40. /* Listening for the click event: */
42. $('.tipVisible').bind('click',function(){
43. var tip = $(this).parent();
45. /* If a open/close animation is in progress, exit the function */
46. if(tip.is(':animated'))
47. return false;
48. 
    
49. if(tip.find('.slideOutContent').css('display') == 'none')
50. {
51. tip.trigger('slideOut');
52. }
53. else tip.trigger('slideIn');
54. 
    
55. });
57. $('.slideOutTip').bind('slideOut',function(){
58. 
    
59. var tip = $(this);
60. var slideOut = tip.find('.slideOutContent');
62. /* Closing all currently open slideouts: */
63. $('.slideOutTip.isOpened').trigger('slideIn');
65. /* Executed only the first time the slideout is clicked: */
66. if(!tip.data('dataIsSet'))
67. {
68. tip .data('origWidth',tip.width())
69. .data('origHeight',tip.height())
70. .data('dataIsSet',true);
72. if(tip.hasClass('openTop'))
73. {
74. /*
75. If this slideout opens to the top, instead of the bottom,
76. calculate the distance to the bottom and fix the slideout to it.
77. */
79. tip.css({
80. bottom : tip.parent().height()-(tip.position().top+tip.outerHeight()),
81. top : 'auto'
82. });
84. /* Fixing the title to the bottom of the slideout, so it is not slid to the top on open: */
85. tip.find('.tipVisible').css({position:'absolute',bottom:3});
87. /* Moving the content above the title, so it can slide open to the top: */
88. tip.find('.slideOutContent').remove().prependTo(tip);
89. }
91. if(tip.hasClass('openLeft'))
92. {
93. /*
94. If this slideout opens to the left, instead of right, fix it to the
95. right so the left edge can expand without moving the entire div:
96. */
97. tip.css({
98. right : Math.abs(tip.parent().outerWidth()-(tip.position().left+tip.outerWidth())),
99. left : 'auto'
100. });
102. tip.find('.tipVisible').css({position:'absolute',right:3});
103. }
104. }
106. /* Resize the slideout to fit the content, which is then faded into view: */
108. tip.addClass('isOpened').animate({
109. width : Math.max(slideOut.outerWidth(),tip.data('origWidth')),
110. height : slideOut.outerHeight()+tip.data('origHeight')
111. },function(){
112. slideOut.fadeIn();
113. });
114. 
     
115. }).bind('slideIn',function(){
116. var tip = $(this);
117. 
     
118. /* Hide the content and restore the original size of the slideout: */
120. tip.find('.slideOutContent').fadeOut('fast',function(){
121. tip.animate({
122. width : tip.data('origWidth'),
123. height : tip.data('origHeight')
125. },function(){
126. tip.removeClass('isOpened');
127. });
128. });
129. 
     
130. });
131. });