Floating text
Floating text
Hello,
with my code below my intention is to expand the text if I click "Header1" and also if I click "Header2" but separately.
The behaviour now is, if I click "Header1" than both texts expand.
How can I do this separately.
Thanks a lot,
All the best.
- <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<title>JSP Page</title>
</head>
<body>
<h1>Hello World!</h1>
<div id="latestNews">
<div id="latestNewsHeader">Letzte Neuigkeiten</div> <br />
<div class="latestNewsShortcut">Header1</div>
<p class="latestNewsText" style="display: none">text..</p>
<br />
<div class="latestNewsShortcut">Header2</div>
<p class="latestNewsText" style="display: none">text...</p>
<br />
</div>
<script>
$(".latestNewsShortcut").hover(function () {
$(this).css({fontWeight:"bold"});
$(this).css("text-decoration", "underline");
},function() {
if(!$(".latestNewsText").is(":visible")) {
$(this).css({fontWeight:"normal"});
$(this).css("text-decoration", "none");
}
}
);
$(".latestNewsShortcut").click(function () {
if($(".latestNewsText").is(":visible")) {
$(".latestNewsShortcut").css({fontWeight:"normal"});
$(".latestNewsText").hide("fast");
}
else {
$(".latestNewsShortcut").css({fontWeight:"bold"});
$(".latestNewsText").show("fast");
}
});
</script>
</body>
</html>