Testimonial Container

Will Bontrager Dec 1, 2008

General

This script creates a nice little format for displaying testimonials. The container is initially displayed in a collapsed stated, and then expanded for the entire testimonial. It can also be used to highlight comments, featured products or news stories. Easy to implement. A nice addition to any site!

Testimonial

Loved the script!

[more ...]

Notes

Created by: Will Bontrager
Web Site: http://www.willmaster.com/
Posted: December 1, 2008

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: testimonialContainer.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Will Bontrager | http://www.willmaster.com/Licensed under: U.S. Copyright
 */

function FlipDisplay(d1,d2) {
  if(document.getElementById(d1).style.display == "none") {
    document.getElementById(d1).style.display = "";
    document.getElementById(d2).style.display = "none";
  } else {
    document.getElementById(d1).style.display = "none";
    document.getElementById(d2).style.display = "";
  }
}

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

.testimonialNormalFlow { 
  border:1px #666666 dashed;
  padding:10px;
  width: 180px;
  font: .8em verdana, arial, helvetica, sans-serif;
}

p.testimonial {
  margin:0; 
  font-weight:bold; 
  background-color:#efefef; 
  padding:3px; 
  letter-spacing:3px;
  font-size:larger;
  text-align:center;
}

p.collapseTitle {
  margin:0;
  text-align:right;
  font-size: .8em;
  margin-top: -10px;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="testimonialContainer.js"></script>

Body

Paste this code into the BODY section of your HTML document


<!-- Start of testimonial container div -->
<div class="testimonialNormalFlow">
<p class="testimonial">Testimonial</p>

<!-- Start of collapsed content div -->
<div id="testimonialA">
<p>
Loved the script!
</p>
<p class="collapseTitle">
<a href="javascript:FlipDisplay('testimonialA','testimonialB')">[more ...]</a>
</p>
</div>
<!-- End of collapsed content div -->

<!-- Start of expanded content div -->
<div id="testimonialB" style="display:none;">
<p>
Really sweet!</p>
<p>
Cras lectus sociosqu platea diam ac. Eni ve sollicitudin rhoncus, justo pede aliquet, a, lectus urna quam.</p>
<p>
Eu porta mattis id nulla consequat vestibulum conubia dis. Nulla cubilia cras, id lacus eni risus ridiculus leo facilisi.</p>
<p>Laculis<br/><a href="http://www.javascriptsource.com/">JavaScript Source</a></p>
<p class="collapseTitle">
<a href="javascript:FlipDisplay('testimonialA','testimonialB')">[close]</a>
</p>
</div>
<!-- End of expanded content div -->

</div>
<!-- End of testimonial container div -->

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details