Css Div To Change Div Content

[Zath]

Hello.I have two columns inside a wrapper div.The left column has a nested div to show info and the right column has 3 or 4 divs for a link or image as a link that, when clicked, will change the content of the left side nested info div.Is it possible to use a:active from one div (right side link) to change the visibility (or other attribute) of a div on the left totally seperate from the first ?I'm trying to use xhtml1-strict and hoped it could be achieved in CSS.The page in question is here. The site is a work in progress but is live.http://www.shipinneastgrinstead.co.uk/drinks.aspI currently have text links but they will eventually be an image.There are 3 divs named wines, beers, minerals set as display:none. I was hoping to be able to be able to change display:none to display:blockAny help or advice welcome.

[Kingy]

Yes you'll have to use classes, have a look at the classes section in this.http://www.yourhtmlsource.com/stylesheets/csslinks.html

[dsonesuk]

Is it possible to use a:active from one div (right side link) to change the visibility (or other attribute) of a div on the left totally seperate from the first ?

Answer: No!classes? won't help in this situation, only to change the link image, text when hovered over, nothing more.You have to pass a value depending on what anchor link is clicked using onclick event using javascript + DOMexample: <a href="java script:void(null);" onclick="showhideinfo('beers');">Beers, Ciders etc.</a>Note: 'beers' is the name of the id ref you wish to show information relating to this link.then this would run a function to hide all unrelated already opened info, and then show the relative info depending on button pressed.<script type="text/javascript">function showhideinfo(linkclicked){var leftinfocontainer = document.getElementById("leftsideinfo"); var innerinfodivs = leftinfocontainer.getElementsByTagName("div"); //search for all tags <div> within div container id ref leftsideinfovar innerdivTotal = innerinfodivs.length; //find number of inner di tagsfor(i=0;i<innerdivTotal;i++) //loop through all inner div tags{innerinfodivs.style.display="none";//hide all open inner info divs}document.getElementById(linkclicked).style.display="block";//show info div relating to link clicked}</script>

[Zath]

Thanks for the reply kingy but dsonesuk has confirmed what I suspected.I've already considered foregoing the total CSS idea in favour of some Javascript.Your example coding is going to be a great help.If I know the total div count, can I enter the actual figure rather than test for it ?

[dsonesuk]

yes you can enter the count manually, but you must remember adding divs, that are not containers for information link only (such as nested divs), will result in those divs becoming counted and hidden also, resulting in a chaotic result.