Question

I have a buttonset which is functioning almost like tabs – clicking a button will display some relevant content. This was fine, until I needed to link directly to specific sections, so I’m now using jQuery to grab the page’s hash tag and display the appropriate content, but I’d also like to change the state of the button so it’s clear which one is selected.

I’ve tried using addClass('ui-state-active'); and whilst this sets the state of the button perfectly, it also means the state is persistent – if you click on another button, both will then be highlighted/active.

Here’s the page with the effected issue – https://secure.photofileltd.co.uk/new_site/index.php?page=services#scarringReports

Any help would be much appreciated, thank you!

Answer 1

You can trigger the click action on the button rather than setting the class.

if ($('.ui-state-active').length==0) {
    $('.your_buttons_class').first().click();
}