Question

I currently have a tab on my page (created with Jquery UI) that when clicked expands some content that is collapsed on page load. I want to be able to activate that tab’s action by pressing a separate button on the site. For example, here is the jquery script that makes the tab work it uses Jquery UI core, and the scrollTo plugin:

<script type="text/javascript">
$(function() {
    $( "#tabs" ).tabs({
        collapsible: true,
        selected: -1
    });
});
</script>
<script type="text/javascript">
$(function(){
    $(".scrolltoanchor").click(function(){
        $.scrollTo($($(this).attr("href")), {
            duration: 750
        });
        return false;
    });
});
</script>

And the tab looks like this:

<div id="tabs">
    <ul>
        <li ><a href="#testimonial" class="scrolltoanchor">Testimonials</a></li>
    </ul>
    <div id="testimonial">
        <p>THE CONTENT IS HERE</p>
    </div>
</div>

So I want to put a button elsewhere on the page that expands this content and scrolls to the content, essentially this button, when clicked, will do the exact thing that the “Testimonials” <li> tab does. It would expand #testimonial, and scrolls to it.

Answer 1

Couldn’t you use the .trigger() function on the element?

For example, if you had an element with the ID of ‘button’, the following code should do what you want:

$('#button').click(function(){
    $('.scrolltoanchor').trigger('click');
});
​

jsFiddle example.