Sliding Text

Sliding text is an useful snippet that works greatly for listing FAQ or Q&A. This snippet helps people easily find a question and derived-answer by the responsive structure.
In addition, it can highlight each answer with sliding up effect when people click a question. You can refer to this actual example from the Pro Pack FAQ page. jQuery sliding up / down effect is applied. Compose your own lists with this widget.
Please look at below lists, and try to click each question.

Preview

How can I use Pro Pack for my website?

Pro Pack delivers your custom code (HTML) via "Build your own" wizard. Just copy & paste your code into HTML snippet or snippet box of your web editor.

Does Pro Pack support mobile devices? Does it works on all platforms?

Yes. Every widget (snippet) in Pro Pack is 100% verified on cross-platform including iOS, and Android as well as all modern web browsers.

Can I use Pro Pack on my Chrome Book? What OS is compatible?

Yes. Pro Pack is platform-independent. You can use from every platform where a web browser is installed.

Build your own

Input data in the fields below.
Click "Apply these settings", select the entire codes. Then, press Command + C (Mac) or Control + C (Windows) to copy.
Paste the source code into HTML snippet in iWeb. (Non-iWeb users can also copy & paste each code in the <head> and <body> to each tag.)

* Customize styles (Insert your desired snippet size. This height should be big enough to contain hidden texts.)

width height padding (vertical)

* Font styles

font color font family font size

* Optional settings

background color (answer) border color border size (between questions)

* Insert contents

question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
.slidecontent_container {/*widget_width*/width:700px;/*widget_height*/height:500px;/*font_size*/font-size:14px;/*font_family*/font-family:Lucida Grande,Lucida Sans Unicode, sans-serif;}
.slidecontent_container,.slidecontent_section a {/*font_color*/color:#666666;}
.slidecontent_section {/*vertical_padding*/padding:5px 0;border:none;/*border_top*/border-top:1px dotted #c8c8c8;margin:0;text-align:left;clear:both;}
.slidecontent_section.item-first {border-top:none;}
.slidecontent_button {padding-left:16px;outline:none;cursor:pointer;}
.slidecontent_button.closed {background:url('https://dl.dropbox.com/s/w3r0swcphe7hxv2/arrow-closed.png') center left no-repeat;}
.slidecontent_button.expanded {background:url('https://dl.dropbox.com/s/hlui7zapnuh3i2r/arrow-open.png') center left no-repeat;}
.slide_contents {/*alt_background_color*/background-color:#eeeeee;padding:7px 16px;margin:0;line-height:150%;display:none;}
.slidecontent_section a {text-decoration:none;}
.slidecontent_section a:hover {text-decoration:underline;}
</style>

<script type="text/javascript">
function showslidecontent(c){var b;if(c.parent().next().hasClass("slide_contents")){b=c.parent().next()}else{b=c.parent().next().next()}if(c.hasClass("closed")){c.addClass("expanded");b.show();c.removeClass("closed")}}function closeslidecontent(c){var b;if(c.parent().next().hasClass("slide_contents")){b=c.parent().next()}else{b=c.parent().next().next()}if(c.hasClass("expanded")){c.addClass("closed");b.hide();c.removeClass("expanded")}}function slidecontentevent(){var d;if($(this).parent().next().hasClass("slide_contents")){d=$(this).parent().next()}else{d=$(this).parent().next().next()}var c=$(this);if(d.hasClass("slide_contents")){if(c.hasClass("closed")){c.off("click").css("cursor","default").addClass("expanded");d.slideDown(function(){c.removeClass("closed");c.on("click",slidecontentevent).css("cursor","pointer")})}else{if(c.hasClass("expanded")){c.off("click").css("cursor","default");d.slideUp(function(){c.removeClass("expanded").addClass("closed");c.on("click",slidecontentevent).css("cursor","pointer")})}}}};$(document).ready(function(){$(".slidecontent_button").on("click", slidecontentevent)});
</script>
</head>

<body style="background: transparent; margin: 0pt;">
<div class="slidecontent_container">
<!--begin to insert contents-->
<!--end to insert contents-->
</div>
</body>
</html>

* Copy and paste this code above into HTML snippet (iWeb) or snippet (for other tools, follow "Installation Guide"), and see if it works on your web browser.

I am Preview

This live demo is dynamically loaded when you push "Apply these settings" button. This preview may not be same to the actual view in your website.
* Important! Don't click a link from this preview. It will make you leave this page out so that you may lose your own code.