{"id":1016,"date":"2013-02-19T14:55:57","date_gmt":"2013-02-19T13:55:57","guid":{"rendered":"https:\/\/ridgesolutions.ie\/?p=1016"},"modified":"2013-10-18T10:43:30","modified_gmt":"2013-10-18T09:43:30","slug":"twitter-bootstrap-programmatically-open-or-close-an-accordion-with-javascript","status":"publish","type":"post","link":"https:\/\/www.ridgesolutions.ie\/index.php\/2013\/02\/19\/twitter-bootstrap-programmatically-open-or-close-an-accordion-with-javascript\/","title":{"rendered":"Twitter Bootstrap programmatically open or close an Accordion with javascript"},"content":{"rendered":"

Q:<\/strong> I have a nice accordion in my web app set-up in twitter bootstrap but how can I programmatically open or close a section using javascript?<\/p>\n

A:<\/strong> Use the .collapse() function to open, close or toggle a collapsible accordion section. <\/p>\n

Consider this 2 section accordion:<\/p>\n

[crayon]<\/p>\n

\n
\n
\n <\/p>\n

Camera Settings<\/p>\n

<\/a>\n <\/div>\n

\n
\n

The camera settings<\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n <\/p>\n

Acquisition Settings<\/p>\n

<\/a>\n <\/div>\n

\n
\n

The acquisition settings.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

[\/crayon]
\nThen, as an example, to automatically open the second accordion section (identified by ‘#category-2’) when the page loads you could do the following:<\/p>\n

[crayon]
\n