Mad_Griffith Posted July 9, 2015 Share Posted July 9, 2015 (edited) Hi, I want to trigger a jQuery UI accordion element from a separate link and the following works so far. The problem is that whenever any other element in the accordion is clicked, the accordion element I triggered from the link stays open. Why so? <a onclick="jQuery('.ui-accordion-header:nth-of-type(3)').removeClass('ui-state-default ui-corner-all').addClass('ui-state-active ui-corner-top').attr({'aria-expanded': true, 'aria-selected': true}); jQuery('.ui-accordion-content:nth-of-type(3)').addClass('ui-accordion-content-active').css({'display' : 'block','overflow': 'hidden'}); jQuery('.ui-accordion-header:nth-of-type(3)')[0].scrollIntoView(true);" style="color: white; background-color: red; padding: 15px; font-size: 25px; text-transform: uppercase">Participate</a> Edited July 9, 2015 by Mad_Griffith Link to comment Share on other sites More sharing options...
Mad_Griffith Posted July 9, 2015 Author Share Posted July 9, 2015 (edited) I've just found out that I could use this shorthand, but still would like to know what was missing in the code above... <a onclick="jQuery('.ui-accordion').accordion({ active: 2 });jQuery('.ui-accordion-header:nth-of-type(3)')[0].scrollIntoView(true);" style="color: white; background-color: red; padding: 15px; font-size: 25px; text-transform: uppercase">Participate</a> Edited July 9, 2015 by Mad_Griffith Link to comment Share on other sites More sharing options...
dsonesuk Posted July 9, 2015 Share Posted July 9, 2015 The whole point of jquery is to be Unobtrusive, it should be separate from html making it cleaner, light and easier to maintain. Link to comment Share on other sites More sharing options...
Mad_Griffith Posted July 9, 2015 Author Share Posted July 9, 2015 Yeah, I am not going to tell you why I did it because it would be a tl;dr for you. And anyway, the problem I highlighted in the opening post would be there even if I used the separation of concerns. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 9, 2015 Share Posted July 9, 2015 (edited) So jQuery similar to this which does the same thing wouldn't work for you? jQuery(function() { jQuery('body').on('click', '.accordian_anchor_trigger', function() { jQuery('.ui-accordion').accordion({active: 2}); jQuery('.ui-accordion-header:nth-of-type(3)')[0].scrollIntoView(true); }); }); .accordian_anchor_trigger {color: white; background-color: red; padding: 15px; font-size: 25px; text-transform: uppercase;} <a class="accordian_anchor_trigger">Participate</a> Edited July 9, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now