Hi All,
I’m looking to be pointed in the right direction here.
I have a client that has an about us page that will have 2 links on it. The short story and the long story.
What they want is to have a plus sign next to each story title. When you click the plus sign the whole story (content) will appear on the same page. Click the minus sign and the story contracts back to just the title.
Any help is appreciated
I’d have a page with the first link (which prolly should also be a header, depending on your content setup) and its page, and then the other link with its own page.
Then I’d use Javascript to add the “+” (since + makes little sense to anyone seeing the full articles by default) and hiding both articles (so, they’d be in their own divs). Personally I’d prefer to do this by styling the CSS for adding the + with content (so make clicking the whole link possible, a + is tiny and makes people work harder to click it than you need) and the hiding (position: absolute and left: -999em) and writing this for certain classes, and Javascript does nothing more than add or remove the classes.
It might even make sense to not even have links at first, just header tags with the text in them… and let Javascript turn this
<h2>Name of Article One</h2>
into this
<h2><a href=“#”>Name of Article One</a></h2>
and have the CSS have
h2 a:before {
content: “+\0a”;
style that plus! Set a colour, font-size, text shadow?
}
Since the h2 only has an a in it after Javascript adds it in, the styles can just be sitting in your stylesheet.
But that’s just me. And my above code isn’t IE6-IE7 worthy (if you support those, Javascript will have to add in the + inside the anchor).