asked on

Expand accordion with button outside the accordion

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?

mcnute

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

mcnute

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

ASKER CERTIFIED SOLUTION

disrupt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mcnute

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

disrupt

Somtimes it is, not all the time though!