Well this is a reasonably simply thing to do
first start by defining some
css
- Code: Select all
.newsDivs
{
display: none;
}
then a small script in the top of your document
- Code: Select all
var currentNews = false; // will hold reference to last opened news item so it can be closed for a new one
function toggleNews (id) // function takes an element id that will be toggled
{
var newsItem = document.getElementById (id);
// close the old news item if there is one
if (currentNews)
currentNews.style.display = 'none';
// now display the new div
newsItem.style.display = 'block';
// store it as current item
currentItem = newsItem;
}
Okay so that's your javascript, now all you need to do is put the news content into divs in your
html and give them the class "newsDivs" and a unique id. Then on the links that you want to toggle the displays, put onmouseover="toggleNews('divId')";
EG
- HTML: Select all
<a href="#" onmouseover="toggleNews('div1')">Show div1</a>
<a href="#" onmouseover="toggleNews('div2')">Show div2</a>
<div class="newsDivs" id="div1"> Hello, I am some random content created by rakuli to show this script</div>
<div class="newsDivs" id="div2">No! <em>I</em> am the aforementioned random content</div>
That should sort ya out
