PDA

View Full Version : Animated Collapsible DIV HELP



ApartmentPostings
05-15-2012, 05:23 PM
1) Script Title: Animated Collapsible DIV

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem: First of all thank you to DD for having such an excellent website with such a source for information.

I use this script to run my entire website. However I would like to be able to have one DIV close whenever another DIV is opened. As of now I think my visitors are getting lost in having to close so many DIVs.

I am not sure of the name of the script and I might have titled this with the wrong one. Below is a sample of the code which hopefully someone has seen before.

<script type="text/javascript">
$(document).ready(function() {
$(".flip22").click(function() {
$(".panel22").slideToggle("slow");
});
});
</script>

<style type="text/css">
div.panel22, p.flip22
{
margin: 0px;
padding: 0px;
text-align: center;
background: #303030;
border: solid 0px #c3c3c3;
}
div.panel22
{
display: none;
}
</style>

<div class="panel"><div> Used to hide panel

<div class="flip"></div> Used to open panel

This is an excellent script but I do not have a clue how to modify it.

Thank you for you help.

ddadmin
05-15-2012, 10:32 PM
You can get all the DIVs to close except the one you're expanding by grouping them together when initializing the script, for example:


animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')

Notice the code in red above- to group certain DIVs together so only one is expanded and the rest contracted during user interaction, give each of the DIVs a common group name, such as group=pet or group=mycontent etc.

On the DD demo page (http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm), this is shown in Demo #4, 5, and 6.

ApartmentPostings
05-16-2012, 01:38 PM
Dear ddadmin,

Wow, that was easy and yes, it was in front of me all this time. Thank you very much for your help. This is great, I'm going to make the changes today. This has been something that has bothered me for a lone time.

Thanks again.

DD is great!