advanced css .active/hover

Hi,
let me explain the situation. You have a wordpress template and when you start writing you can fill in this:

<div id="feat1"><p><a href="/client/index.php#feat1display">
Donec vitae nisl a nibh fermentum facilisis
</a></p></div>
<div id="feat1display">
<h1 id="feat1heading"><strong>Creative</strong>Notion <em>4.9</em></a></h1>
<p id="feat1descr">Donec vitae nisl a nibh fermentum facilisis. Mauris ligula odio, varius quis, semper vel, pulvinar quis, nibh. Proin lorem. In placerat tortor non dui. <em>Suspendisse</em> potenti. Nam et tellus. Nulla facilisi. Sed felis diam, placerat non, malesuada ut. In placerat tortor non dui. Suspendisse potenti.</p></div>

Code (markup):

the h1 has an absolute positioning to the top of the page; where you can see it under featured articles
(links to the div feat1display)
the div feat1display also has an absolute positioning.

Now I only want to appear feat1display when I click <div id=feat1><p></p></div>

and feat2display appears when you clickclick <div id=feat2><p></p></div>

Do you have a solution, i would appreciate this a lot

 

hi,
There is a option in div to hide... Try tat man.. i think it will satisfy your need!

 

ok thank you I will try this one out. Anyone else got an idea?

 

Hi,
let me explain the situation. You have a wordpress template and when you start writing you can fill in this:

<div id="feat1">
<p><a href="#" onclick="toggle('feat1display');">
If you click this feat1display should be toggled on and the others of</a></p></div>
<div id="feat1display">
<h1 id="feat1heading">Heading</h1>
<p id="feat1descr">Description</p></div>[CODE]

Now I only want to appear feat1display when I click feat1
and feat2display appears when you click feat2 (another wordpres post) but it should also disable feat1display then

Javacode:
[CODE]<script language="JavaScript">   
    function toggle(id) {   
        var state = document.getElementById(id).style.display;   
            if (state == 'block') {   
                document.getElementById(id).style.display = 'none';   
            } else {   
                document.getElementById(id).style.display = 'block';   
            }   
        }   
</script> 

Code (markup):

css

#feat2display,#feat3display,#feat4display{
display:none;}

Code (markup):

Do you have a solution, i would appreciate this a lot[/QUOTE]