PDA

View Full Version : Accordian Content Script



asoekaya
06-30-2008, 02:47 PM
Helllo everybody iam new here...
but i know this web since 3 year ago.. but i not joining this forum..heheheh...

i have use this script..

http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm

i want to edit it...
look.. when we click at another place else at that script the opening folder will close automaticly... can someone tell me what script must i add to the script..

i have nopt good in english..
i hope this explain will make u undestand...
this is menu on the script

What is JavaScript?
Difference betwen Java & JavaScript?
What is Ajax?

example.. when i click on What is JavaScript? menu will show rigth.. nah.. now i want to edit if the menu has opened and when i clik at another place else that tree menu the opening menu will close automaticly..

how it be i do..

thanks..

ddadmin
06-30-2008, 09:57 PM
Sure, you can have the headers also collapse whenever the user clicks anywhere outside the header/ sub content area on the page by using the "oninit()" event handler in the following manner:


//Initialize first demo:
ddaccordion.init({
headerclass: "mypets", //Shared CSS class name of headers group
contentclass: "thepet", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
$(document).click(function(e){
var issubcontent=$(e.target).parents().andSelf().filter('.thepet').length
if (issubcontent==0)
ddaccordion.collapseall("mypets")
})
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

Notice the part in red, plus the two CSS classes in bold that correspond to the two Classes in your Accordion contents.

asoekaya
06-30-2008, 10:38 PM
thank you very much bro...
excelent advice

asoekaya
07-01-2008, 05:39 PM
hello bro..
i get new problem...


<html>
<head>
<title>{judul_situs}</title>

<script type="text/javascript" src="js/jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="js/ddaccordion.js"></script>

<style type="text/css">
.technology{ /*header of 2nd demo*/
cursor: hand;
cursor: pointer;
font: bold 12px Verdana;
margin: 8px 0;
}


.openlanguage{ /*class added to contents of 2nd demo when they are open*/
color: darked;
}

.closedlanguage{ /*class added to contents of 2nd demo when they are closed*/
color: black;
}
</style>

<script type="text/javascript">
ddaccordion.init({
headerclass: "technology", //Shared CSS class name of headers group
contentclass: "thelanguage", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["closedlanguage", "openlanguage"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "<img src='images/close.gif' /> ", "<img src='images/open.gif' /> "], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
$(document).click(function(e){
var issubcontent=$(e.target).parents().andSelf().filter('.thelanguage').length
if (issubcontent==0)
ddaccordion.collapseall("technology")
})
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>

</head>
<body>

<div class="border">

<div class="technology">Selamat Datang</div>
<div class="thelanguage"><? include "themes/auracms/mudy/selamat.php"; ?></div>


<div class="technology">Biodata Saya</div>
<div class="thelanguage"><? include "themes/auracms/mudy/biodata.php"; ?></div>

<div class="technology">Activity Now</div>
<div class="thelanguage"><? include "themes/auracms/mudy/activity.php"; ?></div>

<div class="technology">Curiculum Vitae</div>
<div class="thelanguage"><? include "themes/auracms/mudy/curiculum.php"; ?></div>

<div class="technology">Index Prestasi</div>
<div class="thelanguage"><? include "themes/auracms/mudy/prestasi.php"; ?></div>

<div class="technology">Jenjang Pendidikan Saya</div>
<div class="thelanguage"><? include "themes/auracms/mudy/pendidikan.php"; ?></div>

</div>

</body>
</html>

i change that default content with my new content ( the red word )...
and it work normally... but i dont know why the last content in <body> show up out off script.. u can see at my website..

http://www.nofiyanti.info/index.php

the las topic i named Jenjang Pendidikan Saya and content title jenjang Pendidikan why that last topic show up doubles, one in script and another one out of script ...

thanks for ur solution

ddadmin
07-02-2008, 01:38 AM
In the future, please start a new thread when asking a new question about a script (instead of replying to one).

The double take seems to be due to simply that content appearing twice in your page's HTML:


<div class="technology">Jenjang Pendidikan Saya</div>
<div class="thelanguage"><div class="border"><h4>Jenjang Pendidikan</h4><p>jenjang pendidikan saya..</p></div></div>

</div>

</body>
</html><div class="border"><h4>Jenjang Pendidikan</h4><p>jenjang pendidikan saya..</p></div><h1 class="bg_utama" style="margin:0">Berita Hangat</h1>

<h4 class="bg1">Update Page Manager</h4>

Furthermore, the </div> tag in bold seems to be redundant, and should be removed.

BTW, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice: http://www.dynamicdrive.com/notice.htm

asoekaya
07-02-2008, 03:30 AM
thanks bro..
i dont get your answer...

oh yeah.. sorry for violation... i dont mean to do that.. i have write it again now..:):)
thanks alot..