Log in

View Full Version : Changing content in Div upon Link Click


CSSie
08-20-2013, 08:12 PM
Okay, so I've posted this on 2 other websites with no such luck. Everyone keeps giving me jquery or javascript answers and I'm looking for just a simple css solution. I know this can be done with just css because I've seen it done on other profiles.

I have around 4 buttons and they are images, and one div. Upon clicking each button, the div content should change, but it does not. The information from button 1 stays in the div when all links are clicked and I cant get it to function.


<style type="text/css">
#button1 {position:fixed;top:200px;left:650px;}
#button2 {position:fixed;top:300px;left:650px;}
#button3 {position:fixed;top:400px;left:650px;}
#button4 {position:fixed;top:500px;left:650px;}
#content {border: 1px dashed black;width: 300px; height:500px;position:fixed;left:750px;top:150px;background: rgba(181, 142, 146, 0.5);color:black;font-size:10px;text-align:center;}
</style>

<div id="button1"><a href="#FAQ"><img src="http://img62.imageshack.us/img62/3523/p42e.png"></a></div>
<div id="button2"><a href="#Her"><img src="http://img16.imageshack.us/img16/3742/lnam.png"></a></div>
<div id="button3"><a href="#And"><img src="http://img829.imageshack.us/img829/2347/kflq.png"></a></div>
<div id="button4"><a href="#Enjoy"><img src="http://img24.imageshack.us/img24/5111/zv9.png"></a></div>

<div id="content"> This is where I put the default information. No clicks needed </div

<a name="FAQ">
<div style="border: 1px dashed black;width: 300px; height:500px;position:fixed;left:750px;top:150px;}
FAQ content will go here.


So when I click on FAQ, I do not see the text inside, the div content doesn't change one bit upon clicking on button 1.

Any help to make the sections/buttons functional is appreciated.
chadlexmorgan
08-21-2013, 02:39 AM
Can you include a link to your site?
Beverleyh
08-21-2013, 06:17 AM
A JavaScript solution seems like a very reasonable suggestion - are there any particular reasons why you're dismissing the advice?


I know this can be done with just css because I've seen it done on other profiles.if you've seen it done in a particular way that you like, can you not look at that site's CSS to see how, or if you're having problems either finding the pertinent part or deciphering the CSS, you can give us a link so we can help.

Alternatively, a quick google search on "change div content with CSS click" brings up quite a few options http://www.google.com/search?ei=rFoUUvzPF6bG0QWsnIGoCQ&q=change+div+content+with+css+click&oq=change+div+content+with+css+click
Beverleyh
08-21-2013, 06:26 AM
Btw, there are some errors in your markup so be sure to correct them;

<div id="content"> This is where I put the default information. No clicks needed </div>

<a name="FAQ">
<div style="border: 1px dashed black;width: 300px; height:500px;position:fixed;left:750px;top:150px;">
FAQ content will go here.
</div>
coothead
08-21-2013, 10:10 AM
Hi there CSSie,

and a warm welcome to these forums. ;)

Try it like this...


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>untitled document</title>

<style>

#button1 {position:fixed;top:200px;left:650px;}
#button2 {position:fixed;top:300px;left:650px;}
#button3 {position:fixed;top:400px;left:650px;}
#button4 {position:fixed;top:500px;left:650px;}

#button1:focus~#content #def,
#button2:focus~#content #def,
#button3:focus~#content #def,
#button4:focus~#content #def {display:none;}

#button1:focus~#content div:nth-child(2),
#button2:focus~#content div:nth-child(3),
#button3:focus~#content div:nth-child(4),
#button4:focus~#content div:nth-child(5) {display:block;}

#content {
border:1px dashed black;
width:300px;
height:500px;
position:fixed;
left:750px;
top:150px;
background:rgba(181,142,146,0.5);
color:black;
font-size:10px;
text-align:center;
}

#faq,#her,#and,#enj {display:none;}

</style>

</head>
<body>

<a id="button1" href="#" tabindex="1"><img src="http://img62.imageshack.us/img62/3523/p42e.png" alt=""></a>
<a id="button2" href="#" tabindex="2"><img src="http://img16.imageshack.us/img16/3742/lnam.png" alt=""></a>
<a id="button3" href="#" tabindex="3"><img src="http://img829.imageshack.us/img829/2347/kflq.png" alt=""></a>
<a id="button4" href="#" tabindex="4"><img src="http://img24.imageshack.us/img24/5111/zv9.png" alt=""></a>

<div id="content">
<div id="def">This is where I put the default information. No clicks needed </div>
<div id="faq">FAQ content will go here.</div>
<div id="her">Her content will go here.</div>
<div id="and">And content will go here.</div>
<div id="enj">Enjoy content will go here.</div>
</div>

</body>
</html>

coothead
CSSie
08-25-2013, 09:16 PM
Hey Bev! I've tried google, all of them happen to be javascript and jquery answers/suggestions.

The site I am sure for profiles doesn't allow jquery/javascript and is limited to only html/css. Thanks so much for your suggestion! I've tried to mimic the coding of other people's who've had it work out fine, with no such luck. I'm a terrible beginner, and even just that is pushing it.

As for you, coothead,

Thanks so much! This is exactly what I was looking for! And the warm welcome is certainly appreciated, too!

I apologize for my late reply as well.

Thanks for taking the time out to assess my problem, both of you.
coothead
08-25-2013, 09:33 PM
No problem, you're very welcome. ;)


coothead
Abhisheknjain
11-18-2013, 05:25 PM
Hi,
I appreciate your contribution to this forum

In the above code if I make a little modification, I am unable to see the result as desired. The modification are in bold
Please help...

Thanks in advance





<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>untitled document</title>

<style>

#button1 {position:fixed;top:200px;left:650px;}
#button2 {position:fixed;top:300px;left:650px;}
#button3 {position:fixed;top:400px;left:650px;}
#button4 {position:fixed;top:500px;left:650px;}

#main a:nth-child(1):focus~#content #def,
#main a:nth-child(2):focus~#content #def,
#main a:nth-child(3):focus~#content #def,
#main a:nth-child(4):focus~#content #def {display:none;}

#main a:nth-child(1):focus~#content div:nth-child(2),
#main a:nth-child(2):focus~#content div:nth-child(3),
#main a:nth-child(3):focus~#content div:nth-child(4),
#main a:nth-child(4):focus~#content div:nth-child(5) {display:block;}

#content {
border:1px dashed black;
width:300px;
height:500px;
position:fixed;
left:750px;
top:150px;
background:rgba(181,142,146,0.5);
color:black;
font-size:10px;
text-align:center;
}

#faq,#her,#and,#enj {display:none;}

</style>

</head>
<body>

<div id="main">
<a id="button1" href="#" tabindex="1"><img src="http://img62.imageshack.us/img62/3523/p42e.png" alt=""></a>
<a id="button2" href="#" tabindex="2"><img src="http://img16.imageshack.us/img16/3742/lnam.png" alt=""></a>
<a id="button3" href="#" tabindex="3"><img src="http://img829.imageshack.us/img829/2347/kflq.png" alt=""></a>
<a id="button4" href="#" tabindex="4"><img src="http://img24.imageshack.us/img24/5111/zv9.png" alt=""></a>
</div>

<div id="content">
<div id="def">This is where I put the default information. No clicks needed </div>
<div id="faq">FAQ content will go here.</div>
<div id="her">Her content will go here.</div>
<div id="and">And content will go here.</div>
<div id="enj">Enjoy content will go here.</div>
</div>

</body>
</html>
coothead
11-18-2013, 07:39 PM
Hi there Abhisheknjain,

and a warm welcome to these forums. ;)


In the above code if I make a little modification, I am unable to see the result as desired.

Unfortunately, you forgot to say what your "desired result" was. :eek:

coothead
Abhisheknjain
11-19-2013, 08:25 AM
Hi
Thanks a ton for responding. Sorry I didn't realize, i missed to point out my desired result.

Actually I am trying to apply some transformation on one section of my website when I click on some other section.

Basically, the code you provided is working fine. i.e when i click on the msg img, the content on the other div is changing.

But the same is not working when i put these msg img (id=button1,2 etc..) inside a div (id=main).

I hope you got my point.

Thanks again. :)
coothead
11-20-2013, 07:08 AM
Hi there Abhisheknjain,


unfortunately, as far as I know, your requirement cannot be achieved with CSS. :(

There is no relationship between elements in your #main div and those in your
#content div. :eek:

Javascript would seem to be the appropriate method to use in this instance. ;)


coothead