Jquery Accordion - opening with href link

问题:

I created a scrip with some help of stackoverflow.

At the moment my Code looks like

<script type="text/javascript">
$(function() {
    $( "#accordion" ).accordion();
    var hashId = 0,
    $accordion = $('#accordion');
    if (window.location.hash) {
      $accordion.children('h3').each(function(i){
        var txt = $(this).text().toLowerCase().replace(/\s+/g,'_');
        this.id = txt;
        if (txt === window.location.hash.slice(1)) {
          hashId = i;
        }
      });
    }

    $accordion.accordion({
      active: hashId,
      animate: true,
      heightStyle: 'content',
      collapsible: true,
      create: function( event, ui ) {
        $accordion.children('h3').each(function(i){
          $(this).before('<a class="accordion-link link" data-index="' + i + '" href="#' + this.id + '"></a>');
        });
        $accordion.find('.accordion-link').click(function(){
          $accordion.accordion( "option", "active", $(this).data('index') );
        });
      }
    });
  });
  </script>

The only question I've got, how can i close the first Accordion by default?

The HTML:

<div id="accordion">
<h3><a href="#link1">Link1</a></h3>
<div>content</div>

<h3><a href="#link2">Link2</a></h3>
<div>content</div>
</div>

Thanks, Chris

UPDATE

I deleted now the third line - the Code looks like:

<script type="text/javascript">
$(function() {
    var hashId = 0,
    $accordion = $('#accordion');
    if (window.location.hash) {
      $accordion.children('h3').each(function(i){
        var txt = $(this).text().toLowerCase().replace(/\s+/g,'_');
        this.id = txt;
        if (txt === window.location.hash.slice(1)) {
          hashId = i;
        }
      });
    }

    $accordion.accordion({
      active: hashId,
      animate: true,
      heightStyle: 'content',
      collapsible: true,
      create: function( event, ui ) {
        $accordion.children('h3').each(function(i){
          $(this).before('<a class="accordion-link link" data-index="' + i + '" href="#' + this.id + '"></a>');
        });
        $accordion.find('.accordion-link').click(function(){
          $accordion.accordion( "option", "active", $(this).data('index') );
        });
      }
    });
  });
  </script>

回答1:

What you need to do is initialize your accordion with ...

$("#accordion").accordion({ active: false, collapsible: true });  

... and then move the "active hash accordion" code inside of your

if (windows.location.hash)

It ends up looking something like this:

$(function () 
{
    var hashId = 0,
        $accordion = $("#accordion")
                         .accordion({ active: false, collapsible: true });

    if (window.location.hash) 
    {
        $accordion.children('h3').each(function (i)
        {
            var txt = $(this).text().toLowerCase().replace(/\s+/g,'_');
            this.id = txt;
            if (txt === window.location.hash.slice(1))
                hashId = i;
        });

        $accordion.accordion
        ({
            active: hashId,
            animate: true,
            heightStyle: 'content',
            collapsible: true,
            create: function ( event, ui ) 
            {
                $accordion.children('h3').each(function (i)
                {
                    $(this).before('<a class="accordion-link link" data-index="' + i + '" href="#' + this.id + '"></a>');
                });
                $accordion.find('.accordion-link').click(function () 
                {
                    $accordion.accordion( "option", "active", $(this).data('index') );
                });
            }
        });
    }
});

All collapsed: http://codepen.io/anon/pen/kLbeD

Link 1 active: http://codepen.io/anon/pen/kLbeD#link1

Link 2 active: http://codepen.io/anon/pen/kLbeD#link2

回答2:

Look at the collapsible property of accordion. It's defined as:

Whether all the sections can be closed at once. Allows collapsing the active section.

And the code to use it would be:

$('#accordion').accordion({ collapsible: true });

回答3:

Using the property active:false works

Demo:http://jsfiddle.net/robschmuecker/Tajhr/

http://api.jqueryui.com/accordion/#option-active

$accordion.accordion({
        active: false,
        animate: true,
        heightStyle: 'content',
        collapsible: true,
        create: function (event, ui) {
            $accordion.children('h3').each(function (i) {
                $(this).before('<a class="accordion-link link" data-index="' + i + '" href="#' + this.id + '"></a>');
            });
            $accordion.find('.accordion-link').click(function () {
                $accordion.accordion("option", "active", $(this).data('index'));
            });
        }
    });