Anasayfa
Yazının önce küçük bir kısmını gösterip linke tıklanması ile tüm hepsinin görüntülenmesini sağlayabileceğiniz örnek bir javascrıpt uygulaması.
- Kod:
<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://kanalbizim.tr.gg
Created by: Kanalbizim | http://www.kanalbizim.tr.gg/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 = "";
}
}
</script>
<style>
.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;
}
</style>
<!-- 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://javascript.internet.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 -->
