PDA

View Full Version : how to call accordion onopenclose event when other element is clicked



Laksh
09-15-2011, 05:59 AM
http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm

I want to make the same operation of accordion when some button (like next/Previous) is clicked.
i.e, i want to call event onopenclose when button is clicked...
plz...can anybody resolve it asap

jscheuer1
09-15-2011, 05:00 PM
If your Next/Previous button opens or closes an accordion's content using ddaccordion.expandone, ddacordion.collapseone, or ddaccordion.toggleone, it will fire that accordion's onopenclose event. But it (that accordion) must have one configured for it.

Does your button open or close an accordion's content?
If not, why would you want it to fire an onopenclose event?
If so, does that accordion have an onopenclose event defined in its init?
If it does, what does it look like?

It might be best if you put up a demo of what you're trying to do and provide a link to it.

Laksh
09-19-2011, 05:44 AM
The next/previous button has just to expand (next/previous) accordion...
can you give suggest me how to configure to expand, collapse and toggle the accordion
I dont have any link to show my page

jscheuer1
09-19-2011, 04:17 PM
You don't need the onopenclose event for that. As I said though, if you have one it will fire.

To create previous and next buttons you can use the oninit function, example using the first accordion from the demo page (the highlighted part would be the same for any accordion):


//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", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
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: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
// create next/previous button events
var hc = this.headerclass, curindex = 0, subs = ddaccordion.contentgroup[hc],
$ = jQuery, next, prev, subsl = subs.length;
if(!this.collapseprev){
alert('For Previous/Next buttons, collapseprev must be set to true');
return;
}
function findcurrent(isprev){
$.each(subs, function(i, el){
if(el.style.display === 'block'){
curindex = i;
}
});
}
$('.' + hc + 'next').click(function(e){
e.preventDefault();
findcurrent();
next = (curindex + 1) % subsl;
ddaccordion.expandone(hc, next);
});
$('.' + hc + 'prev').click(function(e){
e.preventDefault();
findcurrent(true);
prev = (curindex - 1 + subsl) % subsl;
ddaccordion.expandone(hc, prev);
});
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}

Then you can have buttons like so (this differs from accordion to accordion, use the headerclass prefix, red as shown):


<a href="#" class="mypetsprev">Previous</a> <a href="#" class="mypetsnext">Next</a>

Notes:

You can have as many of these buttons as you want. They can be images or form buttons, or links as shown. They just need the class. Use the headerclass + next or the headerclass + prev as shown.

The collapseprev must be set to true, otherwise you can have a situation where all are expanded and hitting next or previous will do nothing. The code will alert you if you forget and will not initialize the next/previous buttons.

For the purposes of this demo, I changed the mypets revealtype to 'click'.

I've since worked out a version that will be OK with collapseprev set to false. What it will do is collapse any that are open and go to the next or previous. The next is determined as the next one that wasn't already open, or the first if all or the last is/are open. The previous is the one before the first opened or the last if all or the first is/are open:


oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
// create next/previous button events
var hc = this.headerclass, curindex = 0, subs = ddaccordion.contentgroup[hc],
$ = jQuery, next, prev, subsl = subs.length, tog = this.toggleclass;
function findcurrent(isprev){
subs.each(function(i){
if(this.style.display === 'block'){
curindex = i;
return !isprev;
}
});
if(!this.collapseprev){
subs.each(function(i){
if(this.style.display === 'block'){
this.style.display = 'none';
$(headers[i]).removeClass(tog[1]).addClass(tog[0]);
}
});
}
}
$('.' + hc + 'next').click(function(e){
e.preventDefault();
findcurrent();
next = (curindex + 1) % subsl;
ddaccordion.expandone(hc, next);
});
$('.' + hc + 'prev').click(function(e){
e.preventDefault();
findcurrent(true);
prev = (curindex - 1 + subsl) % subsl;
ddaccordion.expandone(hc, prev);
});
},

This will also work if collapseprev is true.

Laksh
09-21-2011, 05:00 AM
Thank You John..
Problem is solved....once again thanks a lot

Laksh
09-21-2011, 05:02 AM
Can You plz Suggest me how to add Scroll bar to accordion, when there are more items in the accordion

-Lakshman

jscheuer1
09-21-2011, 10:28 AM
Well, one of the major reasons to have an accordion is to save space. If you have a lot of items, the user should be able to scroll down the page to see them. It's hard for me to imagine a situation where you would want to constrain that. But I guess it could happen.

In order to have a scroll bar, you need a container, like:


<h2>Example 1:</h2>
<a href="#" onClick="ddaccordion.expandone('mypets', 0); return false">Expand 1st header</a> | <a href="#" onClick="ddaccordion.collapseone('mypets', 0); return false">Collapse 1st header</a> | <a href="#" onClick="ddaccordion.toggleone('mypets', 1); return false">Toggle 2nd header</a>
<br><a href="#" class="mypetsprev">Previous</a> <a href="#" class="mypetsnext">Next</a>
<div id="petaccordion">
<h3 class="mypets">Dogs</h3>
<div class="thepet">
<img src="http://i10.tinypic.com/7xlrga1.jpg" />
The dog is a domestic subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been (and continues to be) one of the most widely-kept working and companion animals in human history, as well as being a food source in some cultures.
</div>

<h3 class="mypets">Cats</h3>
<div class="thepet">
The Cat, also known as the Domestic Cat or House Cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years.
</div>

<h3 class="mypets">Rabbits</h3>
<div class="thepet">
Rabbits are small mammals in the family Leporidae of the order Lagomorpha, found in several parts of the world. There are seven different genera in the family classified as rabbits, including the European rabbit (Oryctolagus cuniculus), cottontail rabbit (genus Sylvilagus; 13 species), and the Amami rabbit (Pentalagus furnessi, endangered species on Amami O-shima, Japan). There are many other species of rabbit, and these, along with cottontails, pikas, and hares, make up the order Lagomorpha. Rabbits generally live between four and twenty years.
</div>
</div>

Then in your stylesheet give it a width and height, set its overflow to auto:


#petaccordion {
width: 800px;
height: 300px;
overflow: auto;
}