Wordpress Advanced Custom Fileds Akkordeon JS, HTML, CSS

Question

Ich entwickle gerade eine Akkordeon mit Advanced CUstom Fields auf WordPress, ich bin wirklich neu zu PHP und Js Codierung und habe im Grunde alle folgenden Tutorials und lernen so schnell wie ich kann getan.

Ich habe es geschafft, eine funktionale acordion zu machen, gibt es ein kleines Problem, ich weiß nicht, wie es die erste Registerkarte auf Standard öffnen zu lassen und automatisch eine Registerkarte zu schließen, wenn onther geöffnet ist, das sind die Codes im verwenden

/*renders the ACF and has the html structure of the Acordion*/ 

      <?php the_field(main_content); ?>    

        <?php if(have_rows('tabs')) ?> 

        <div id="acordion"> 
         <?php while(have_rows('tabs')): the_row(); ?> 
         <button class="accordion"><a href="#tab-content--<php $tabLabel++; ?>"><h4 class="tabheadername"><?php the_sub_field('tab_label'); ?></h4></a><h4 class="tabheadercompany"><?php the_sub_field('company')?></h4></button> 

         <div class="panel"> 
         <img src="<?php the_sub_field('tab_image'); ?>" alt="" style="position:relative; z-index:500;" class="png" /> 
         <?php the_sub_field('tab_content'); ?> 


         </div> 
        </div>       


         <?php endwhile; ?> 

Dies ist der CSS es

button.accordion { 
background-color: #eee; 
color: #444; 
cursor: pointer; 
padding: 18px; 
width: 100%; 
border: none; 
text-align: left; 
outline: none; 
font-size: 15px; 
transition: 0.4s; 
} 
button.accordion.active, button.accordion:hover { 
background-color: #ddd; 
} 


button.accordion:after { 
content: '\02795'; /* Unicode character for "plus" sign (+) */ 
font-size: 13px; 
color: #777; 
float: right; 
margin-left: 5px; 
} 

button.accordion.active:after { 
content: "\2796"; /* Unicode character for "minus" sign (-) */ 
} 

div.panel { 
padding: 5px 18px; 
background-color: white; 
max-height: 0; 
overflow: hidden; 
transition: 0.6s ease-in-out; 
opacity: 0; 
} 

div.panel.show { 
opacity: 1; 
max-height: 500px; /* Whatever you like, as long as its more than the height      of the content (on all screen sizes) */ 
padding-top:20px!important; 
} 




h4.tabheadername { 
display: inline; 
} 

h4.tabheadercompany { 
display: inline; color:#333!important; margin-left:7px!important;border-  left: 1px solid #333; padding-left:7px!important; 
} 


#acordion:first_child { 
opacity: 1!important; 
max-height: 500px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */ 
padding-top:20px!important; 
} 


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

.accordion { 
overflow:hidden; 
box-shadow:0px 1px 3px rgba(0,0,0,0.25); 
border-radius:3px; 
background:#f7f7f7; 
} 

/*----- Section Titles -----*/ 
.accordion-section-title { 
width:100%; 
padding:15px; 
display:inline-block; 
border-bottom:1px solid #1a1a1a; 
background:#333; 
transition:all linear 0.15s; 
/* Type */ 
font-size:1.200em; 
text-shadow:0px 1px 0px #1a1a1a; 
color:#fff; 
} 

.accordion-section-title.active, .accordion-section-title:hover { 
background:#4c4c4c; 
    /* Type */ 
text-decoration:none; 
} 

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

/*----- Section Content -----*/ 
.accordion-section-content { 
padding:15px; 
display:none; 
} 

Und das ist das js Skript

<script> 
var acc = document.getElementsByClassName("accordion"); 
var i; 

for (i = 0; i < acc.length; i++) { 
acc[i].onclick = function(){ 
    this.classList.toggle("active"); 
    this.nextElementSibling.classList.toggle("show"); 
    } 
} 
</script> 

zum ursprünglichen Stil

Here is how my tabs look, they are closed by default Ich mag würde wissen, wie es zu machen, die ersten Reiter hat standardmäßig geöffnet und in der Nähe geöffnet Tabs atomaticaaly wenn ein anderes Danke für die Hilfe geöffnet wird: D

Answer 1

Sie dies, indem ein PHP erreichen kann Zählvariable, um jedes zurückgegebene Element zu zählen. Sie können dies in Ihrem Code wie folgt erreichen:

<?php the_field(main_content); ?>    

<?php 
$count = 0; //setup the count parameter 
if(have_rows('tabs')) 
?> 
<div id="acordion"> 
<?php while(have_rows('tabs')): the_row(); $count++; //loop through returned items ?> 
<button class="accordion"> 
<a href="#tab-content--<?php $tabLabel++; ?>" <?php if($count == 1){ echo 'class="active"'; } //add the 'active' class if it is the first item ?>"><h4 class="tabheadername"><?php the_sub_field('tab_label'); ?></h4></a><h4 class="tabheadercompany"><?php the_sub_field('company')?></h4> 
</button> 
<div class="panel"> 
<img src="<?php the_sub_field('tab_image'); ?>" alt="" style="position:relative; z-index:500;" class="png" /> 
<?php the_sub_field('tab_content'); ?> 
</div> 
</div> 
<?php endwhile; ?> 

Der obige Code im Grunde eine Variable setzt bis zu jedem Punkt zu zählen, der zurückgegeben wird. Dann wird nach dem ersten Eintrag gesucht und die Tab-Klasse auf "aktiv" gesetzt. Hoffe, das hilft, lass es mich wissen, wenn das für dich funktioniert.