CODEWITHSUNDEEP
javascriptjqueryhtml
Hello Universe
Hello Universe

Reputation: 3302

How to make accordion panel open if it has anchor link?

I have an accordion. I have such that if there is an anchor inside the accordion, then if there is a link with the anchor the concerned accordion panel will open.

What I am basically asking is this.

  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>


<div id="accordion">
  <h3>Section 1</h3><a name="myAnchor"></a>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>

Upvotes: 1

Views: 2401

Answers (2)

charlietfl
charlietfl

Reputation: 171679

If you want it to open based on url the href of that anchor needs to have the same hash in it if that is what you want to use.

var hash = window.location.hash;
var hashName = hash && hash.replace('#','');
$('.accordionModule .accordionPanel .content a').filter(function(){
    return this.hash === hash;
    // or
     return this.name === hashName;       
}).closest('.accordionPanel').find('.trigger').click();

OR

$('.accordionModule .accordionPanel .content a[href$=' + hash +']')
  .closest('.accordionPanel').find('.trigger').click();

So url = mywebsite.com#myanchor would match <a href="#myanchor"></a>

Upvotes: 1

Casey ScriptFu Pharr
Casey ScriptFu Pharr

Reputation: 1670

Example, if I understand yo correctly on wanted functionality:

var userUrl = window.location.href.split( '#' )[1];
$('.accordionModule .accordionPanel .content a').each(function( index ) {
    if ($( this ).attr('name') == userUrl ) {
        var $theTarget = $("a[href='" + userUrl + "']"); //gets the anchor targeted
        //then open the corresponding panel
        $theTarget.closest('.accordionPanel').find('.trigger').click();
    }
});

I hope this is what you are asking. It is late, and Im getting tired. lol

Upvotes: 1

Related Questions