JQuery - Toggle (newbie help)
I've nearly gotten this code working, however, IE7 is showing some padding between the top tab and the div directly underneath it and I can't figure it out. I realize that this might be a CSS issue, too. So I apologize if this is the incorrect forum.
Here's the code:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.show').click(function(){
if($(this).hasClass('on')){
$(this).attr('src', 'images/horiz_tab_unselected.jpg').
removeClass('on');
} else {
$(this).attr('src', 'images/horiz_tab_selected.jpg').
addClass('on');
}
$(this).parent().find('.toggle').toggle('fast');
});
});
</script>
<link href="css/test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="maincontent">
<div class="TabTitle"><a href="#">Test</a></div>
<img class="show" src="images/horiz_tab_unselected.jpg"/>
<div class="toggle" style="display:none;">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum consequat pretium. Sed ultricies magna non purus accumsan sollicitudin. Phasellus vehicula vulputate dolor feugiat varius. Etiam et tortor non massa hendrerit lobortis et sit amet nisi. Mauris commodo mi eget lectus varius nec imperdiet ipsum bibendum. In semper ante dictum nulla molestie pharetra. Nunc justo diam, volutpat vel congue non, consectetur egestas eros. Nunc nibh mi, interdum sed blandit eget, lacinia vel erat. Nulla facilisi. Nam condimentum bibendum suscipit. In semper fermentum massa, et aliquam orci ultricies non. Pellentesque adipiscing bibendum est nec porta. Vivamus porta leo sit amet nunc hendrerit sit amet tincidunt nulla eleifend. Vivamus a diam a magna porttitor imperdiet. Cras aliquet urna ac mauris tristique feugiat. Aliquam vitae dolor at lectus fringilla elementum. Cras at ipsum et metus laoreet euismod in eget ligula? Quisque sagittis varius augue. Nunc nec nulla quam, at molestie dolor. Integer vel orci a magna ultricies facilisis?</div><div class="bottom"> </div>
</div><!-- CLOSE toggle -->
</div>
<div class="maincontent">
<img class="show" src="images/horiz_tab_unselected.jpg"/>
<div class="toggle" style="display:none;">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum consequat pretium. Sed ultricies magna non purus accumsan sollicitudin. Phasellus vehicula vulputate dolor feugiat varius. Etiam et tortor non massa hendrerit lobortis et sit amet nisi. Mauris commodo mi eget lectus varius nec imperdiet ipsum bibendum. In semper ante dictum nulla molestie pharetra. Nunc justo diam, volutpat vel congue non, consectetur egestas eros. Nunc nibh mi, interdum sed blandit eget, lacinia vel erat. Nulla facilisi. Nam condimentum bibendum suscipit. In semper fermentum massa, et aliquam orci ultricies non. Pellentesque adipiscing bibendum est nec porta. Vivamus porta leo sit amet nunc hendrerit sit amet tincidunt nulla eleifend. Vivamus a diam a magna porttitor imperdiet. Cras aliquet urna ac mauris tristique feugiat. Aliquam vitae dolor at lectus fringilla elementum. Cras at ipsum et metus laoreet euismod in eget ligula? Quisque sagittis varius augue. Nunc nec nulla quam, at molestie dolor. Integer vel orci a magna ultricies facilisis?</div><div class="bottom"> </div>
</div><!-- CLOSE toggle -->
</div></body>
</html>
And the styles:
- /* CSS Document */
/* Body Styles */
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #000000;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #000000;
}
#p7menubar {
font-size: 0.85em;
background-color: #FFFFFF;
float: left;
width: 100%;
}
#p7menubar ul {
margin:0;
padding:0px 10px 0 10px;
list-style-type:none;
}
#p7menubar li {
float:left;
margin:0 1px 0 0;
padding:0 0 0 10px;
background-image: url(../images/type1_left.gif);
background-repeat: no-repeat;
}
#p7menubar a {
float:left;
display:block;
padding:5px 15px 5px 5px;
text-decoration:none;
color:#FFFFFF;
background-image: url(../images/type1_right.gif);
background-repeat: no-repeat;
background-position: right top;
}
#p7menubar a:hover {
color:#FFFFFF;
}
#p7menubar li:hover, #p7menubar li.p7hvr {
color:#FFFFFF;
background-image: url(../images/type1_left_on.gif);
}
#p7menubar li:hover a, #p7menubar li.p7hvr a {
background-position:right top;
background-image: url(../images/type1_right_on.gif);
color: #FFFFFF;
}
/* Tooltip */
#fixedtipdiv {
color: #000000;
position:absolute;
padding: 2px;
border:1px solid black;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}
/* toggle */
.toggle {
width: auto;
height: auto;
}
#maincontent {
width: auto;
height: auto;
}
.TabTitle {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
position: relative;
left: 30px;
top: 29px;
}
.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
width: 567px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 0px;
padding-left: 10px;
background-image: url(../images/body_background.jpg);
background-repeat: no-repeat;
}
.show {
background-image: url(../images/horiz_tab_unselected.jpg);
background-repeat: no-repeat;
width: 587px;
height: 49px;
}
.bottom {
height: 12px;
width: auto;
background-image: url(../images/body_bottom.gif);
background-repeat: no-repeat;
}
Aside from the spacing issue in IE7, I'd like to have a different image other than "horiz_tab_unselected.jpg" for the top-most tab. How can I add additional Jquery script to accomplish this? (The toggle selects one of 2 images currently).
Thank you for your time!
Dan