Content Box Expand\Contract Script
Hi,
I got a script for my content boxes that allows them to expand\contract via an onclick function. The content boxes use the same CSS class for the body of the box which is removed onlick. However when I click the anchor to toggle the content box it toggles all of them and not just the one I've clicked on.
I just need to be able to adapt my script to target the one I'm clicking on. I've tried different variations on using 'this', but can't get it to work.
Can anyone help? Please see the code below.
-
var showHideBox = {
is_hidden: false,
init: function () {
showHideBox.exeInit();
},
exeInit: function()
{
$('a.changeBox').click(showHideBox.toggle);
},
hide: function()
{
var image_src = $('.control img').attr('src').replace('normal','expand');
$('.control img').attr('src',image_src);
$('.body').slideUp('fast');
showHideBox.is_hidden = true;
return false;
},
show: function()// TODO test function - rewritten
{
var image_src = $('.control img').attr('src').replace('expand','normal');
$('.control img').attr('src',image_src);
$('.body').slideDown('slow');
showHideBox.is_hidden = false;
return false;
},
toggle: function()
{
/* $('#toggle').toggle(400);
(simple version if just show-hiding) */
if (showHideBox.is_hidden) {
showHideBox.show();
} else {
showHideBox.hide();
}
return false;
}
}
$(document).ready(showHideBox.init);
Also here is the XHTML.:
-
<div class="headerTop"><!-- fix for IE6 --></div>
<div class="header">
<h2>Updates <a href="#"><img src="images/icon_rss.gif" width="12" height="12" alt="RSS Feed" /></a></h2>
<div class="boxControl">
<ul>
<li class="control"><a href="#" class="changeBox"><img src="images/button_box_control_normal.gif" width="15" height="17" alt="Collapse button" title="Click to collapse box" /></a></li>
</ul>
</div>
</div>
<div class="headerDivider"></div>
<div class="body">
</p>
<h3>10 July</h3>
<p>
Pellentesque ligula turpis, dictum sit amet, iaculis eu, faucibus ornare, mauris. Donec tincidunt elementum ante.
</p>
<h3>9 July</h3>
</p>
</div>
<div class="footer"><!-- --></div>
I've been thinking after looking at this and it seems like the JS doesn't locate the body class that is associated with the click it just finds all the body classes.