Make a panel a link in Zurb Foundation 5 accordion - css

Question

What I am looking to do is have an accordion where the top panel of the accordion is a link to another page, and the rest of the accordion functions normally. I've tried some javascript to stop the accordion event, but that does not seem to work. Any pointers?

Answer 1

Yeah looks like first you'd need to delete the interior content so that it doesn't expand. After that, I'd add a class the a tag and write some script on the page to recognize the class and redirect the url. Something like the below:
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
<a class="redirect-me" href="http://www.google.com">Accordion 1</a>
</li>
<li class="accordion-navigation">
Accordion 2
<div id="panel2a" class="content">
Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</li>
<li class="accordion-navigation">
Accordion 3
<div id="panel3a" class="content">
Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</li>
</ul>
Script would look something like this with jQuery:
$(".redirect-me").bind("click",function(){
theUrl = $(this).attr("href");
window.location = theUrl;
});
Kind of a dirty way to do it. But it's a bandaid till you can do the recommended way someone else figures out.