Menu icon Foundation
Accordion, open from external link

Is there currently a way within foundation to trigger an accordion panel from an external link?

I've setup the accordion correctly and it works 100%. However, I want to have a "Next" or "Proceed" button which will trigger the opening of the next panel. I've tried simply adding < a href="#step2" >Next</ a > but that doesn't work. If there's not currently a way to do this within foundation I'll just have to write some Javascript to get around it.

accordionexternal link

Is there currently a way within foundation to trigger an accordion panel from an external link?

I've setup the accordion correctly and it works 100%. However, I want to have a "Next" or "Proceed" button which will trigger the opening of the next panel. I've tried simply adding < a href="#step2" >Next</ a > but that doesn't work. If there's not currently a way to do this within foundation I'll just have to write some Javascript to get around it.

Glynn Williams about 4 years ago

Hi

I have various jump links at the top of the page. One is to the only accordion on the page that contains a form. I want the accordion/form to open when the user clicks on the jump link and arrives at the accordion. As it is a big form to leave a review, I'm using the accordion to keep it hidden, as it's optional for the user to fill in. If they click the link to jump to the form, then obviously they want to fill it in, so I'd like to automatically display it.

I'm in the process of doing a mod-rewrite, but for now the link is:

?SPC=6751&STC=37#WREV

I have:

setTimeout(function() {
  var code = <? echo '?SPC='.$SPCode.'&STC='.$STCode.''; ?>;
  var hash = window.location.code.hash;
  if (hash != ''){
    $('a[href="'+ hash +'"]').trigger('click.fndtn.accordion');
    $('html, body').animate({
    scrollTop: $('div#WREV').offset().top
    });
  }
}, 600);

But it is not working. The hash needs to be specific as there are various jump links at the top of the page, so generically looking for ANY hash tag in the URL won't work as it will open when ever any of these links are clicked.

Any ideas please?

Cheers
G

Ryan Hellerud over 4 years ago

I tried with different parameters in the scrollTop: $('dl a') and 'da accordion' ect, but it still wont display with the actual course title visible. Here is some html for the accordions im using:

<dl class="accordion accorborder" data-accordion="">
    <dd class="accordion-navigation">
        <a href="#p14">Algebra 1 Sem 2 (LIT ADVANTAGE)</a>
        <div id="p14" class="content">
            <div class="row">
                <div class="small-6 columns">

not sure what would work or if there's another way to do this.

Doug Richar over 4 years ago

Just change the scrollTop to the offset().top of the accorion element itself, not just the accordion panel you're expanding:

 setTimeout(function() {

  var hash = window.location.hash;
  if (hash != ''){

    $('a[href="'+ hash +'"]').trigger('click.fndtn.accordion');

    $('html, body').animate({
      scrollTop: $('ul.accordion').offset().top
    });
  }
}, 600);

Or the accordion label/header you're using if one exists

 $('html, body').animate({
      scrollTop: $('h4.my-accordion').offset().top
    });

Ryan Hellerud over 4 years ago

the second set of code did work for me, however is there a way to make it so it doesn't scroll past the accordion title but stays at the top of the accordion title so you can see the name of the accordion? Thank you.!!

Ryan Hellerud over 4 years ago

im trying to do this same thing from a different external page, but want to link to the accordian and have it active and at the correct location. Where would I need to place the javascript?

Michael LaRoy over 4 years ago

Here is my adaptation of this method.

note: to be able to watch the animation, I wrapped the function inside a timeout

 setTimeout(function() {

  var hash = window.location.hash;
  if (hash != ''){

    $('a[href="'+ hash +'"]').trigger('click.fndtn.accordion');

    $('html, body').animate({
      scrollTop: $(location.hash).offset().top
    });
  }
}, 600);

this also still worked with just the 'click' in the trigger, since the click triggers the function already.

acme about 5 years ago

The accordion has a custom event click.fndtn.accordion you can use. It will take care of the proper open/closed states:

    jQuery(document).ready(function($) {
      var hash = window.location.hash;

      if (hash != '') {
        $('[data-accordion] [data-icon][href="' + hash + '"]').trigger('click.fndtn.accordion');
      }
    }

Rafi Benkual about 5 years ago

This will for sure take some javascript. Are you trying to link from another page or all on the same page?

Can you post an example? You code?

Ben Goodman about 5 years ago

I'm also looking for a solution to link to an accordion panel. Nothing yet, I've emailed them though. Will let you know if anything comes up.