Hi,
Would any know of a tutorial for a vertical expandable section slider, see attached. I have googled it but can’t seem to find any tutorials. Any suggestions appreciated
That’s often called an Accordion.
Here are some examples, some of which include instructions:
Exactly How to Create a Custom jQuery Accordion | Nettuts+
jQuery UI - Accordion Demos & Documentation
UI/API/1.8/Accordion - jQuery JavaScript Library
If you Goggle something like “jQuery Accordion” you’ll find many more examples. 
Or you could kick that fat bloated steaming pile of manure known as jquery right square in the junk, and use something a bit leaner.
Index of /html_tutorials/accordion
(particularly love how EVERY site you linked to there Ralphy boy is a miserable accessibility /FAIL/)
I’m picking up a subtle message there that you don’t like jQuery? 
(particularly love how EVERY site you linked to there Ralphy boy is a miserable accessibility /FAIL/)
Yeah, I was lazy. I did find a fairly accessible version once, which I’ve used, but darn it all, I didn’t take note of where I got it and have never been able to find the link again.
I like your example, and have bookmarked it. Would like to be able to write this stuff myself, but maybe one day … (I don’t much like this kind of fancy stuff anyway, as even the best ones don’t seem much chop in terms of accessibility.)
That’s usually where my code differs greatly. Case in point, try mine with CSS disabled… or javascript disabled (you will have to refresh after disabling scripting to get the scripting off version).
The classes to make the javascript version actually do the .js thing are applied by the script to your elements – like say a heading and a div around the content to be shrunk. Since none of the scripting works with CSS disabled, it degrades properly there. Since the style that makes the CSS half work is applied by the script, scripting off it degrades properly as well.
Javascript done properly should enhance functionality, not supplant it. Were that more coders took the time to follow that little bit of wisdom. As many of us have said dozens of times on these forums – build with progressive enhancement, and you get graceful degradation as the “gee ain’t it neat” whizbang extras fail or are unavailable.
thank you for your suggestions, will have a look
Indeed, it works well. On the few occasions where I use stuff like this, I always make sure to test it under all circumstances like that. I admit I didn’t test any of those I linked to above.
Yours certainly works even with the one screen reader I have, although, all the same, I’m not sure I’d really know what was going on if I couldn’t see the screen (though it might be clearer to people who are used to browsing that way. Even though you can access everything, I’m not sure it would be clear what you are accessing.). Still, it’s a good job. I wonder if ARIA could take it the last little step (but I’m not experienced enough to be sure).