PDA

View Full Version : Hide and Show content



toplisek
01-11-2012, 11:33 AM
I have tested application like:
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

How to set FAQ in the start (opened). Which setting defines this option?

Need help.

I have set javascript function and content like:



<tr>
<td colspan="2" style="padding:0px;">
<div id="FAQ1" class="myfaq1" onclick="FAQ.hide('FAQ1')" style=" text-align:left; margin:10px;">
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>
<tr>
<td colspan="2" class="myFAQ1">
<script language="javascript">
FAQ.addDiv('FAQ1','fade=1,speed=100,height=auto,hide=1');
</script>
</td>
</tr>

vwphillips
01-11-2012, 12:27 PM
example


animatedcollapse.addDiv('cat', 'speed=400,group=pets,hide=1')


Feature attributes String

The second parameter in animatedcollapse.addDiv() is optional, and accepts a string that enables/ disables certain effects on the DIV. Separate each attribute with a comma (,). Each attribute within the string is optional as well:

hide=1/0

Defaults to undefined.
Set to 0 to explicitly show this DIV when the page first loads. Set to 1 to hide. Typically you would leave out this attribute altogether (so it's undefined) to let the DIV default to its default visibility based on the relevant inline or global CSS on your page.

This attribute is meant to provide an alternate way for you to define the DIV's visibility programmically when you can't or don't wish to do so via CSS.

toplisek
01-11-2012, 01:31 PM
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:


<!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')"/>&nbsp;&nbsp;<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')"/>&nbsp;&nbsp;<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:




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';

}
}

vwphillips
01-18-2012, 09:41 AM
...............


<script type="text/javascript" >

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 = 'http://www.vicsjavascripts.org.uk/StdImages/Cartoon1.gif';
}else{
document.getElementById(tbodyid).style.display = 'none';
document.getElementById(tbodyid).style.visibility = 'hidden';
document.getElementById('img_' + tbodyid).src = 'http://www.vicsjavascripts.org.uk/StdImages/Cartoon2.gif';

}
} </script>
</head>

<body>

<table class="table1">
<!-- Big Item1 -->

<tr>
<th colspan=4>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Cartoon1.gif" id="img_tbody_section1" style="cursor:pointer" onclick="javascript:toggletbody('tbody_section1')"/>&nbsp;&nbsp;<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">

...............

toplisek
01-18-2012, 10:04 AM
Please give me more information what is changed inside posted script.