So stellen Sie sicher, dass eine Akkordeon-Registerkarte immer geöffnet ist, aber nur eine auf einmal

Question

Ich bin ziemlich neu im Code (auch neu zu stackoverflow, also entschuldige ich mich, wenn das Format dieser Frage etwas falsch ist, bekomme ich gerade mein Kopf ringsum). Ich habe ein Akkordeon, das fast wie beabsichtigt funktioniert. Es hat nur zwei Registerkarten, und wenn die andere Registerkarte geöffnet ist, wird die aktuelle geschlossen, was korrekt ist. Ich möchte jedoch sicherstellen, dass eine der Registerkarten zu jeder Zeit und auch standardmäßig beim Laden der Seite geöffnet ist. Wenn die Seite geladen wird, ist die erste Registerkarte bereits geöffnet. Wenn ich auf die zweite klicke, schließt sich die erste und die zweite öffnet sich. Wenn ich dann nochmal auf die zweite klicke, bleibt sie offen, da man immer offen sein muss. Momentan sind sie beim Laden der Seite beide reduziert und können zusammengelegt werden, wenn Sie auf die aktuell geöffnete Registerkarte klicken. Unten ist mein Code.

$(document).ready(function() { 
 
    function close_accordion_section() { 
 
    $('.accordion .accordion-section-title').removeClass('active'); 
 
    $('.accordion .accordion-section-content').slideUp(300).removeClass('open'); 
 
    } 
 

 
    $('.accordion-section-title').click(function(e) { 
 
    var currentAttrValue = $(this).attr('href'); 
 

 
    if ($(e.target).is('.active')) { 
 
     close_accordion_section(); 
 
    } else { 
 
     close_accordion_section(); 
 
     $(this).addClass('active'); 
 
     $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
 
    } 
 

 
    e.preventDefault(); 
 
    }); 
 
});

.accordion, 
 
.accordion * { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.accordion { 
 
    overflow: hidden; 
 
    border-radius: 5px; 
 
    background: white; 
 
} 
 

 
.accordion-section-title { 
 
    width: 100%; 
 
    padding: 0px; 
 
    display: inline-block; 
 
    background: #585858; 
 
    transition: all linear 0.15s; 
 
    font-size: 14px; 
 
    color: #F2F2F2; 
 
} 
 

 
.accordion-section-title.active, 
 
.accordion-section-title:hover { 
 
    background: white; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    color: #585858; 
 
} 
 

 
.accordion-section:last-child .accordion-section-title { 
 
    border-bottom: none; 
 
} 
 

 
.accordion-section-content { 
 
    padding: 0px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="accordion"> 
 
    <div class="accordion-section"> 
 
    <a class="accordion-section-title" href="#accordion-1">Accordion Section #1</a> 
 

 
    <div id="accordion-1" class="accordion-section-content"> 
 
     <p>accordion 1 text</p> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="accordion"> 
 
    <div class="accordion-section"> 
 
    <a class="accordion-section-title" href="#accordion-2">Accordion Section #2</a> 
 

 
    <div id="accordion-2" class="accordion-section-content"> 
 
     <p>accordion 2 text</p> 
 
    </div> 
 
    </div> 
 
</div>

Vielen Dank im Voraus!

Answer 1

Wenn das Dokument fertig ist, fügen Sie den Elementen ".accordion-section-content" und ".accordion-section-title" jeweils die Klassen "open" und "active" hinzu. Rufen Sie nicht die Funktion "close_accordion_section()" auf, wenn ".accordion-section-title" bereits auf die Klasse "active" geklickt hat.

$(document).ready(function() { 
 
    $($('.accordion .accordion-section-title')[0]).addClass('active'); 
 
    $($('.accordion .accordion-section-content')[0]).slideDown().addClass('open'); 
 

 
    function close_accordion_section() { 
 
     $('.accordion .accordion-section-title').removeClass('active'); 
 
     $('.accordion .accordion-section-content').slideUp(300).removeClass('open'); 
 
    } 
 

 
    $('.accordion-section-title').click(function (e) { 
 
     var currentAttrValue = $(this).attr('href'); 
 

 
     if ($(e.target).is('.active')) { 
 
      //close_accordion_section(); 
 
     } else { 
 
      close_accordion_section(); 
 
      $(this).addClass('active'); 
 
      $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
 
     } 
 

 
     e.preventDefault(); 
 
    }); 
 
});

.accordion, 
 
.accordion * { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.accordion { 
 
    overflow: hidden; 
 
    border-radius: 5px; 
 
    background: white; 
 
} 
 

 
.accordion-section-title { 
 
    width: 100%; 
 
    padding: 0px; 
 
    display: inline-block; 
 
    background: #585858; 
 
    transition: all linear 0.15s; 
 
    font-size: 14px; 
 
    color: #F2F2F2; 
 
} 
 

 
.accordion-section-title.active, 
 
.accordion-section-title:hover { 
 
    background: white; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    color: #585858; 
 
} 
 

 
.accordion-section:last-child .accordion-section-title { 
 
    border-bottom: none; 
 
} 
 

 
.accordion-section-content { 
 
    padding: 0px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="accordion"> 
 
    <div class="accordion-section"> 
 
    <a class="accordion-section-title" href="#accordion-1">Accordion Section #1</a> 
 

 
    <div id="accordion-1" class="accordion-section-content"> 
 
     <p>accordion 1 text</p> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="accordion"> 
 
    <div class="accordion-section"> 
 
    <a class="accordion-section-title" href="#accordion-2">Accordion Section #2</a> 
 

 
    <div id="accordion-2" class="accordion-section-content"> 
 
     <p>accordion 2 text</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Sie können etwas tun:

$(".selector").accordion({ 
    active: 2 
}); 

oder

$(".selector").accordion("option", "active", 2); 

Statt 2 können Sie jede Akkordeon-Panel-ID übergeben, die Sie in Laden der Seite aktiv werden soll.

Übergeben Sie es in document.ready.