CODEWITHSUNDEEP
javascriptjqueryhtmlaccordion
mlrodriguez
mlrodriguez

Reputation: 151

Display jQuery Accordion when link is clicked?

All.

I'm working on a long manual, and each section is an accordion that displays when clicked. This is the code for it:

$(function() {
    $( ".accordion" ).accordion({
        collapsible: true,
        active: false,
        heightStyle: "content"
    });
});

So in total I have 24 sections (each is an accordion).

I'm trying to insert links in one of the sections to point to a different section. This is what they look like right now:

  <li><a href="#source1">How to configure Source 1</a></li>
  <li><a href="#source2">How to configure Source 2</a></li>
  <li><a href="#source3">How to configure Source 3</a></li>

The links currently redirect you to the requested section (identified by id="source1", "source2" and "source3" respectively. However, the accordion doesn't open up. The link takes you to the section, but the accordion remains closed.

Is there any way I can get that accordion to open up when the link is clicked? I figured I would need an onclick function, but I'm not entirely sure of how to write it.

Upvotes: 1

Views: 361

Answers (3)

alok
alok

Reputation: 510

Sorry, not comfortable with codepen so took all your code to jsfiddle, made changes and it works:

Relevant section of code is:

<a href="#dropbox" onclick='$("#dropbox").click();'>How to configure Dropbox3</a>

Upvotes: 0

Nvan
Nvan

Reputation: 1146

Try this : 

 <li><a href="#dropbox" onclick="$('#dropbox').click()">How to configure Dropbox</a></li>
 <li><a href="#gdrive" onclick="$('#gdrive').click()">How to configure Google Drive</a></li>
 <li><a href="#sserver" onclick="$('#sserver').click()">How to configure SharePoint</a></li>

Upvotes: 1

Anand Singh
Anand Singh

Reputation: 2363

Accordion API not provide any functionality for this.
My try Not sure but i think this will work..

  $("#goToSecondSection").click(function(){//your link

             $("#yourSelector").accordion('option', 'active' , 1);//1,2,3,.. put accordingly 

       });

Upvotes: 0

Related Questions