I seem to be having trouble targeting only one div element.
Specifically, when I click on "impressum," only the impressum content is displayed within the <div class="ContentBox">. However, when I click on "AboutMe," both the AboutMe and impressum content are shown.
Am I missing something obvious?
This is what I currently have:
<div id="menu">
<div class="content">
<ul>
<li><a href="#"><img src="img/menu/home.png">Home</a></li>
<li><a href="#" class="ContentBox_open" id="AboutMe"><img src="img/menu/ich.png">About Me</a></li>
<li><a href="#" class="ContentBox_open" id="impressum"><img src="img/menu/impressum.png">Impressum</a></li>
</ul>
</div>
</div>
<div class="ContentBox">
<div class="close"><img id="ContentBox_close" src="img/menu/close.png" alt="close"></div>
<div id="impressumTxt" style="display:none;">
<h1>Impressum</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div id="AboutMeTxt" style="display:none;">
<h1>About Me</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(function(){
// show impressum
$('.ContentBox_open').click(
function(event) {
var ContentId = event.target.id;
$('#'+ContentId+'Txt').fadeTo( 10, 0.90 );
$('.ContentBox').fadeTo( "slow", 0.90 );
}
);
// hide impressum
$('#ContentBox_close').click(
function() {
$('.ContentBox').fadeTo( 1000, 0 );
}
);
});
</script>
Thank you for your assistance!