Thanks
I have set full working script for the FAQ.
Issue is that button for sections is not changed to +. Why is this? Did I made some mistake?
Please check my working code:
PHP Code:
<!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" lang="en">
<head>
<title>Show/Hide content</title>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/animatedcollapse.js"></script>
<script type="text/javascript" src="javascript/animatedcollapse_function.js"></script>
<style type="text/css">
/*<![CDATA[*/
table.table1 th {
background-color: #000080;
color: #FFFFFF;
padding: 4px;
text-align: left;
}
.button {
cursor: pointer;
text-decoration: underline;
}
.mytitle {
font-size: 20px;
}
/*]]>*/
</style>
</head>
<body>
<table class="table1">
<!-- Big Item1 -->
<tr>
<th colspan=4>
<img src="images/bt_coll.gif" id="img_tbody_generalfeatures" style="cursor:pointer" onclick="javascript:toggletbody('tbody_section1')"/> <span class="button mytitle" onclick="javascript:toggletbody('tbody_section1')">Main section1 expanded automatic</span>
</th>
</tr>
<tbody id="tbody_section1" style="visibility:visible;display:table-row-group;">
<!-- Small Item -->
<tr valign=top>
<td width="320" class="row1">
<a href="javascript:animatedcollapse.toggle('collapse_faq1')">My FAQ1</a>
</td>
</tr>
<tr>
<td colspan="4" style="padding:0px;">
<div id="collapse_faq1" class="div_box" onclick="animatedcollapse.hide('collapse_faq1')" style=" text-align:left; margin:6px;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </div>
</td>
</tr>
<!-- Show in the start -->
<td width="320" class="row0">
<a href="javascript:animatedcollapse.toggle('collapse_faq2')">MyFAQ expanded in the start</a>
</td>
<tr>
<td colspan="4" style="padding:0px;">
<div id="collapse_faq2" class="div_box" onclick="animatedcollapse.hide('collapse_faq2')" style=" text-align:left; margin:6px;">
Show in the start<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
</td>
</tr>
<!-- End in the start -->
<!-- End Small Item -->
</tbody><!-- End big item1 -->
<!-- Start big item2 -->
<tr>
<th colspan=4>
<img src="images/bt_exp.gif" id="img_tbody_section2" style="cursor:pointer" onclick="javascript:toggletbody('tbody_section2')"/> <span class="button mytitle" onclick="javascript:toggletbody('tbody_section2')">Section 2 (not expanded)</span>
</th>
</tr>
<tbody id="tbody_section2" style="visibility:hidden;display:none;">
<tr>
<td width="320" class="row1">
<a href="javascript:animatedcollapse.toggle('collapse_faq3')">My FAQ3</a>
</td>
</tr>
<tr>
<td colspan="4" style="padding:0px;">
<div id="collapse_faq3" class="div_box" onclick="animatedcollapse.hide('collapse_faq3')" style=" text-align:left; margin:6px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </div>
</td>
</tr>
</tbody>
<!-- End big item2 -->
</table>
<!-- Start All items sample Hide/Show -->
</body>
</html>
and also function as usual:
PHP Code:
animatedcollapse.addDiv('collapse_faq1','fade=1,speed=100,height=auto,hide=1');
animatedcollapse.addDiv('collapse_faq2','fade=1,speed=100,height=auto,hide=1');
animatedcollapse.addDiv('collapse_faq3','fade=1,speed=100,height=auto,hide=1');
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}
//Expand automatic
animatedcollapse.init()
function toggleIni(){
animatedcollapse.toggle('collapse_faq2');
}
setTimeout("toggleIni()",3000);
//Expand section automatic
function toggletbody(tbodyid){
if (document.getElementById(tbodyid).style.display == 'none'){
document.getElementById(tbodyid).style.display = 'table-row-group';
document.getElementById(tbodyid).style.visibility = 'visible';
document.getElementById('img_' + tbodyid).src = '../images/bt_coll.gif';
}else{
document.getElementById(tbodyid).style.display = 'none';
document.getElementById(tbodyid).style.visibility = 'hidden';
document.getElementById('img_' + tbodyid).src = '../images/bt_exp.gif';
}
}
Hide and Show content
Reply With Quote
Bookmarks