customizing jquery accordion ui

Hi I'm using the jquery ui accordion. I've been trying to figure out how to (in addition to the usual accordion function) if I click an outside link it'll act as an anchor tag and also slide the div up show the content?

<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui开发者_Python百科.widget.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.accordion.js"></script>

<script type="text/javascript">
    $(function() {
        $("#accordion").accordion({
            autoHeight: false,
            navigation: true
        });

    });
</script>

<a href="#1">slide 1</a>

<a href="#2">slide 2</a>

<a href="#3">slide 3</a>

<div id="accordion">
  <h3><a href="#" name="1">1</a></h3>
  <div>text here</div>

  <h3><a href="#" name="2">2</a></h3>
  <div>text here</div>

  <h3><a href="#" name="3">3</a></h3>
  <div>text here</div>       
</div>

---

<script type="text/javascript">
    $(function() {
        $("#accordion").accordion({
            autoHeight: false,
            navigation: true
        });
        $('a.link').unbind('click').bind('click',function (){
             var rel = $(this).attr('rel');
             $('#'+rel).trigger('click');
        });
    });
</script>

<a class="link" rel="a1" href="#1">slide 1</a>

<a class="link" rel="a2" href="#2">slide 2</a>

<a class="link" rel="a3" href="#3">slide 3</a>

<div id="accordion">
  <h3 id="a1"><a href="#" name="1">1</a></h3>
  <div>text here</div>

  <h3 id="a2"><a href="#" name="2">2</a></h3>
  <div>text here</div>

  <h3 id="a3"><a href="#" name="3">3</a></h3>
  <div>text here</div>       
</div>

I have not tested this but in theory it should work :)