So my script works perfectly, but here is the
issue, I have buttons (Sprite action here) that are 40px height, but the top 20 only shows perfectly. When you click the button ie img the bottom 20px show perfecto! but...
Issue, i included in my script a way to return all others to there default (only one should be selected) now, how can I fix this
issue that I seem unable to correct as I can select multiple of them ** USERS can switch ** The last part of the script that is the
issue. Thanks
$(document).ready(function() {
$('.form_sub').hide();
$('.theader').addClass('active');
$('.theader_t').click(function() {
$('.form_header').show();
$('.form_sub').hide();
$('.theader').addClass('active');
$('.sub_theader').removeClass('active');
});
$('.sub_theader_t').click(function() {
$('.form_header').hide();
$('.form_sub').show();
$('.theader').removeClass('active');
$('.sub_theader').addClass('active');
});
$('.top_head_img').click(function() {
$(this).css({
position: 'relative',
bottom: '20px'
}).siblings().css(
'bottom', '0'
);
});
});
<ul class="top_head">
<li>
<a href="javascript:void(0)" onClick="selectPic5('top');"><img src="custom/images/top2.jpg" alt="Left" border="0" class="top_head_img"/></a>
</li>
<li>
<a href="javascript:void(0)" onClick="selectPic5('center');"><img src="custom/images/mid2.jpg" alt="Center" border="0" class="top_head_img"/></a>
</li>
<li>
<a href="javascript:void(0)" onClick="selectPic5('bottom');"><img src="custom/images/bot2.jpg" alt="Right" border="0" class="top_head_img"/></a>
</li>
</ul>
