The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

FAQ coding help

View previous topic View next topic Go down

FAQ coding help

Post by Sky Pride on June 5th 2011, 7:38 pm

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

Sky Pride
New Member

Posts : 2
Reputation : 0
Language : English

Back to top Go down

Re: FAQ coding help

Post by Mike on June 5th 2011, 7:43 pm


Mike
Hyperactive

Male Posts : 4242
Reputation : 466
Language : English, HTML, CSS
Location : Bozeman, Montana

Back to top Go down

Re: FAQ coding help

Post by Sky Pride on June 5th 2011, 7:49 pm

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

Back to top Go down

Re: FAQ coding help

Post by Mike on June 5th 2011, 7:52 pm

put this in your templates:

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

Male Posts : 4242
Reputation : 466
Language : English, HTML, CSS
Location : Bozeman, Montana

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum