Hi All,

 

Sorry not posted for a while....

 

Anyhow!

 

I need a hand, I have a site am doing and i want something like this I have started.

 

 

Has you can see from the image when a button is clicked I want the article to be displayed then in the main area (white space) you see.

 

Any idea's ??

 

Would prefer jQuery if poss

 

Cheers

Lee

Using jQuery I would:

 

A) Give Each Button an ID (button-1, button-2,button-3).

Give eeach button a class of "button".

C) Then I would give each button an attribute (1,2,3)

D) Write out each article in the area you want them displaying, giving them an ID also like (article-1,article-2,article-3).

 

Then write some jQuery like:

 

<script type="text/javascript">
<!--
$(document).ready(function(){
$('.button').click(function(){
var id = this.id;
var relationship = $('#'+id).attr('rel');
//Hide Other Articles
$('.button').fadeOut('slow');
$('#article-'+relationship).fadeIn('slow');

});
});

-->
</script>

 

 

Looking back over my code there is a better way of doing it but this should achieve the desired effect

Cheers dude I;ll try that

 

Thanks again

 

 

Using jQuery I would:

 

A) Give Each Button an ID (button-1, button-2,button-3).

Give eeach button a class of "button".

C) Then I would give each button an attribute (1,2,3)

D) Write out each article in the area you want them displaying, giving them an ID also like (article-1,article-2,article-3).

 

Then write some jQuery like:

 

<script type="text/javascript">
<!--
$(document).ready(function(){
$('.button').click(function(){
var id = this.id;
var relationship = $('#'+id).attr('rel');
//Hide Other Articles
$('.button').fadeOut('slow');
$('#article-'+relationship).fadeIn('slow');

});
});

-->
</script>

 

 

Looking back over my code there is a better way of doing it but this should achieve the desired effect

Tried what you said but it's just displaying everything and the buttons disappear when click....

 

I want the buttons to stay there and when clicked just the different articles appear.

 

Here's code:

 

<div id="contentMain">
	<h1>Articles</h1>
	<div id="lft">
		<button id="art1" class="button" rel="1">Article 1</button><br /><br />
		<button id="art1" class="button" rel="2">Article 2</button><br /><br />
		<button id="art1" class="button" rel="3">Article 3</button><br /><br />
		<button id="art1" class="button" rel="4">Article 4</button><br /><br />
	</div>
		<div><p id="article-1">Some text here Some text here Some text here Some text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text here</p></div>
		<div><p id="article-2">Some text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text here</p></div>
		<div><p id="article-3">Some text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text hereSome text here</p></div>
		<div><p id="article-4">Some text hereSome text hereSome text hereSome text hereSome text hereSome text here</p></div>
</div>

 

Just check see if I have done it right, also I got this:

 

<script type="text/javascript">
<!--
$(document).ready(function(){
$('.button').click(function(){
var id = this.id;
var relationship = $('#'+id).attr('rel');
//Hide Other Articles
$('.button').fadeOut('slow');
$('#article-'+relationship).fadeIn('slow');

});
});

-->
</script>

 

In my head tag

I've added you to MSN dude so if you can give me a hand would appreciate it..

 

Cheers

Lee

Sorry dude been afk all weekend. I've just accepted you on msn

Ok dude, catch you on MSN then, just got your mess on here

Am still stuck on this if anyone else any idea's

See the image above (at the top ?)

 

When a button is clicked say Article 1 then the article(text) appears where Ii show the arrow and disapears when article 2 it clicked and article 2 will display....jQuery I want has it's fast but just not sure on to do it, I did get some help has you will see on the previous posts, but this doesn't work and I'm not that advanced in jQuery to build something myself, so please can someone give me a hand ?

 

 

Cheers