We help IT Professionals succeed at work.

Expand accordion with button outside the accordion

mattegol
mattegol used Ask the Experts™
on
Hi,

I need to expand panes in a accordion when clicking on a button outside of the accordion.

Are there any ways to do this server side, or do I need to make a javascript solution?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
the easiest way is to do it via javascript(jquery) client side. this works if the button is on the same page.

<html>
<body>
<div class="accordion"></div>
etc. ....
<div class="button">
</div>
</body>
</html>

Open in new window


 if you want to do expand a accordion via a button on a page other than the accordion page, pass a variable via get which holds the number of the pane you wann open like this:

<div class="button-expand-acc"><a href="www.whateveryoursiteis.com/accordion.html?acc=3"></a></div>

Open in new window


on accodion.html:

<script>
$(function){
var urlstr = window.lacation;
var leng = urlstr.length -1; 
var activeaccpane = urlstr.substring(leng-1 ,leng ); // this works only if the parameter is the last in passed url
$(".button").accordion({ active: activeaccpane });
}
</script>

Open in new window

Commented:
Sorry for the same page example is missing some code:

javascript code for the button:
$(function){
$(".button").click(function(){
$(".accordion").accordion({active: 2});
});
}

Open in new window

Commented:
Cool, i will now copy links to other tutorials in every question here. It seems to be more efficient.

Commented:
Somtimes it is, not all the time though!