FAQ coding help
2 posters
Page 1 of 1
FAQ coding help
Does anyone know the default HTML code for the FAQ effect? Like on all forums, including this one, if you open the FAQ you have the question, then when you click on it you have the answer to it, then when you click on it again it rolls back up. If you have it, could you also post the name of the effect is possible?
Thanks
Thanks
Sky Pride- New Member
- Posts : 2
Reputation : 0
Language : English
Re: FAQ coding help
Its a JQuery Toggle....
http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements/
http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements/
Mike- Hyperactive
- Posts : 4255
Reputation : 471
Language : English, HTML, CSS
Location : Loveland, Colorado
Re: FAQ coding help
Sorry if this causes trouble, but could you explain how it works and how to use it?
Sky Pride- New Member
- Posts : 2
Reputation : 0
Language : English
Re: FAQ coding help
put this in your templates:
then when you do a link put:
- Code:
// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide
// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='Show';
var hideText='Hide';
// initialise the visibility check
var is_visible = false;
// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append(' (<a href="#" class="toggleLink">'+showText+'</a>)');
// hide all of the elements with a class of 'toggle'
$('.toggle').hide();
// capture clicks on the toggle links
$('a.toggleLink').click(function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);
// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');
// return false so any link destination is not followed
return false;
});
});
then when you do a link put:
- Code:
<a href="#" class="toggleLink">trxt</a>
Mike- Hyperactive
- Posts : 4255
Reputation : 471
Language : English, HTML, CSS
Location : Loveland, Colorado
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum