Jump to content

Css Div To Change Div Content


Zath
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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> Edited by dsonesuk
Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...