How to display different articles in same page using side navigation options?

Get Started
1

Hi,
I have a series of pages, in all of which I have a few (4/5) side menu options. When I select each option, I need to display appropriate article contents beside the options column within the same page. I’ve used a template with the accordion effect which is similar to what I need, except that I don’t want the option itself to expand, but instead just change the content which appears beside it. The page I’m working on is available at http://yourdemosite.in/therapies.html. Can someone please help me with their thoughts on how to do this??

Thanks,
Xavier.

2

You could use jquery with tabbed content, such as explained here
http://www.faridesign.net/2012/05/create-a-awesome-vertical-tabbed-content-area-using-css3-jquery/

here’s the version my client requested based on the above
http://thetransformationalchangesteam.com/coaches.php

(sometimes a cached version of the stylesheet is delivered for the above and the text is larger than intended; if the menu covers two lines, that’s what has happened)

OR just search on jquery tabbed content vertical and see what you get.

3

Here’s another version of the same thing—a stripped down page to make it easier to grab the code:

http://pageaffairs.com/code-archive/tabs/

4

Thnx Ralph, that works almost exactly like I wanted :), with just one glitch…in my site, whenever I visit a link, it gets highlighted and doesn’t go away even after I click another link on the same page…i’ve tried changing different sections of the code but no luck as of yet…would you be able to point out the error(s), a sample is at http://www.yourdemosite.in/articles.html…

Btw, I took a few weeks off for the festive season, hence the long break in response :)…

5

I’m not sure what you are referring to there. I can’t see the problem.

6

It’s your other css prob telling it so. If its on the same page then you have to use JS. Jquery makes this easy. Just have to find it. I have a easy solution but apparently I need to go easy on my own links so mods don’t get mad. Good luck.

7

well, ralph, the format is supposed to be such that all the links should be normally light grey in color, other than the currently selected link which should be black…however, now, when a link is selected, it becomes black only after focus is taken away from it and then it remains black even after another link is selected…so, at any one time, there are at least 2 links that are black in color and the unselected ones turn light grey again only when refocused, strange!

8

[FONT=Verdana]You’ve copied ralph.m’s CSS, but haven’t used the same class name in your site, hence the rules are not being applied correctly.

Whereas Ralph has

<div class="aside" role="complementary">
<ul class="tabs">
<li><a href="#one">TAB ONE</a></li>
<li><a href="#two">TAB TWO</a></li>
<li><a href="#three">TAB THREE</a></li>
<li><a href="#four">TAB FOUR</a></li>
</ul>
</div>

You have

<div class="portfolio-sidebar">
<ul class="tabs">
<li><a href="#one">CORPORATE MENTAL HEALTH</a></li>
<li><a href="#two">EATING DISORDER</a></li>
<li><a href="#three">MIND MATTERS</a></li>
<li><a href="#four">SOCIAL ANXIETY DISORDER</a></li>
</ul>
</div>

which is fine, but it means you’ll need to change .aside to .portfolio-sidebar in your CSS for the styles to be applied.[/FONT]

9

Yes, Technobear, I’ve used .portfolio-sidebar because I want the format of the side menu links like that, but unfortunately, even though everything else works fine, the links don’t lose the active link coloring…i have only .current to be highlighted differently, so why would the previous selection remain as though it has also been selected??? If I change .aside to portfolio-sidebar, then I lose all the other formatting which I don’t want :(…

10

Are you sure you’ve added the script correctly? I don’t see the script from the bottom of Ralph’s page on yours.

11

I’ve included the script in one of the .js files (custom.js), it’s definitely there!

12

Hm, odd: the first time I checked your page the tabs weren’t doing that. Anyhow, I see the problem now. It’s hard to tell why that’s happening, but I suspect it’s something to do with the Cufon script. My advice would be to ditch Cufon, in favor of @font-face, which is vastly better. Cufon is a dead technology, and always was slow and inaccessible anyway.

13

How complex would making those changes be, ralph??? i’m working my way through this site with the help of a template i liked and i’m afraid i have only very basic skills :(…

14

OK, well, it should be easy—although templates can sometimes be a mess to work with. In terms of HTML and CSS, though, it’s easy. Perhaps for a start, remove all the Cufon stuff and just put plain text into those links.

Then download the @font-face kit for Bebas from here:

and place the fonts inside your CSS folder, and add the given CSS code to your CSS file.

15

I didn’t really believe you when you said it’d be easy, ralph, but boy, was i wrong :)!!! thnx a bunch for ur tips!

16

Glad to hear it. :slight_smile: I checked your page, but it still has Cufon in it. Was that just a demo page?

17

Well, I did remove the Cufon script initially, ralph, thinking it only impacted the font, but then found that the slideshow didn’t work without it, so back in it went!! Think I can change that quickly as well??? I’ve got to finish the site by this month-end…

18

Oh, i didn’t answer ur qn, did i :)…yes, that’s a demo site that i use for the customer (plural, hopefully in the near future :slight_smile: )…

19

Which slideshow?

20

Ahh, got a bit confused, the slideshow’s on the index page, i’ve removed the Cufon scripts from all pages not using slides on my system, gotta update the site…