简体   繁体   中英

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.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 :)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM