Al clic si dovrebbe aprire solo una fisarmonica

Question

quando faccio clic sulla casella rossa tutte ".community-sub-row" aperte, voglio quando faccio clic sulla casella rossa solo una ".community-sub-row" aperta alla volta e l'altro dovrebbe chiudersi. Grazie in anticipo. E nella casella rossa ho usato la classe di levetta freccia-destra e freccia-giù.

$(document).ready(function(){ 
    $(".community-sub-row").hide(); 

    $(".community-toggle-arrow").click(function(){ 
    $(".community-sub-row").slideToggle(); 
    $(".community-toggle-arrow span").toggleClass("ion-arrow-right-b"); 
    }); 
}); 

DEMO HERE

Answer 1

Usare la seguente. Utilizzare closest() per ottenere la riga padre e quindi mostrare/nascondere gli elementi.

$(document).ready(function() { 
    $(".community-sub-row").hide(); 
    $(".community-toggle-arrow").click(function() { 
    var that = this; 
    if(!$(that).hasClass('progress')){ 
     $(that).addClass('progress'); 
     $thisRows = $(that).closest('.community-row').find(".community-sub-row"); 
     $(".community-sub-row").not($thisRows).slideUp(); 
     $thisRows.slideToggle(function(){ 
      $(that).removeClass('progress'); 
     }); 
     $(that).find("span").toggleClass("ion-arrow-down-b ion-arrow-right-b"); 
    } 
    }); 
}); 

DEMO

Answer 2

è necessario dare un unico id per ogni .community-toggle-arrowdiv si possiede, per specifico che div si fa clic e devono mostrare.

Answer 3

È necessario alternare l'elemento community-sub-row all'interno dello stesso community-row.

Anche utilizzare una regola CSS per impostare lo stato di visualizzazione di default di community-sub-row

$(document).ready(function() { 
 
    var $subs = $(".community-sub-row"); 
 

 
    $(".community-toggle-arrow").click(function() { 
 
    var $sub = $(this).closest('.community-row').find(".community-sub-row").stop(true).slideToggle(); 
 
    $subs.not($sub).stop(true).slideUp(); 
 
    }); 
 
});

.clearfix:after { 
 
    clear: both; 
 
    content: "."; 
 
    display: block; 
 
    height: 0; 
 
    visibility: hidden; 
 
} 
 
.clearfix { 
 
    display: inline-block; 
 
} 
 
.clearfix { 
 
    display: block; 
 
} 
 
.community-row { 
 
    border-bottom: 1px solid #000000; 
 
    padding: 10px; 
 
    min-height: 60px; 
 
    overflow: hidden; 
 
    font-size: 13px; 
 
} 
 
.community-row .community-wrap { 
 
    position: relative; 
 
} 
 
.community-row .community-wrap .community-toggle-arrow { 
 
    float: left; 
 
    font-size: 16px; 
 
    width: 12px; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    margin-right: 5px; 
 
    color: #2385ca; 
 
    cursor: pointer; 
 
    background: red; 
 
} 
 
.community-row .community-wrap .community-icon { 
 
    float: left; 
 
} 
 
.community-row .community-wrap .community-icon img { 
 
    width: 40px; 
 
    margin-right: 5px; 
 
    float: left; 
 
} 
 
.community-row .community-wrap .community-title { 
 
    float: left; 
 
    width: 60%; 
 
} 
 
.community-row .community-wrap .community-title a { 
 
    width: 100%; 
 
    line-height: 18px; 
 
} 
 
.community-row .community-wrap .noti-indicator { 
 
    float: right; 
 
    padding: 0px 5px; 
 
    color: #2385ca; 
 
    border: 1px solid #2385ca; 
 
    float: right; 
 
    margin-top: 8px; 
 
    line-height: 20px; 
 
    -webkit-border-radius: 3px; 
 
    -moz-border-radius: 3px; 
 
    border-radius: 3px; 
 
} 
 
.community-row .community-sub-row { 
 
    padding: 0 0 0 17px; 
 
} 
 
.community-row .community-sub-row .community-wrap { 
 
    margin-top: 10px; 
 
} 
 
.community-row .community-sub-row { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="community-row"> 
 
    <div class="community-wrap clearfix"> 
 
    <div class="community-toggle-arrow"><span class="ion-arrow-down-b"></span> 
 
    </div> 
 
    <div class="community-icon"> 
 
     <img src="assets/img/community_sjsu_lg.jpg" /> 
 
    </div> 
 
    <div class="community-title"><a href="#">Mechanical Engineering (SJSU)</a> 
 
    </div> 
 
    <div class="noti-indicator">5</div> 
 
    </div> 
 
    <div class="community-sub-row clearfix"> 
 
    <div class="community-wrap clearfix"> 
 
     <div class="community-icon"> 
 
     <img src="assets/img/community_mech_sys.png" /> 
 
     </div> 
 
     <div class="community-title"><a href="#">Mechanical Systems</a> 
 
     </div> 
 
     <div class="noti-indicator">5</div> 
 
    </div> 
 

 
    <div class="community-wrap clearfix"> 
 
     <div class="community-icon"> 
 
     <img src="assets/img/community_coding.png" /> 
 
     </div> 
 
     <div class="community-title"><a href="#">Front-end Coding</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="community-row"> 
 
    <div class="community-wrap clearfix"> 
 
    <div class="community-toggle-arrow"><span class="ion-arrow-down-b"></span> 
 
    </div> 
 
    <div class="community-icon"> 
 
     <img src="assets/img/community_tesla_sm@2x.jpg" /> 
 
    </div> 
 
    <div class="community-title"><a href="#">Tesla Motors</a> 
 
    </div> 
 
    <div class="noti-indicator">20</div> 
 
    </div> 
 
    <div class="community-sub-row clearfix"> 
 
    <div class="community-wrap clearfix"> 
 
     <div class="community-icon"> 
 
     <img src="assets/img/community_mech_sys.png" /> 
 
     </div> 
 
     <div class="community-title"><a href="#">Mechanical Systems</a> 
 
     </div> 
 
     <div class="noti-indicator">5</div> 
 
    </div> 
 

 
    <div class="community-wrap clearfix"> 
 
     <div class="community-icon"> 
 
     <img src="assets/img/community_coding.png" /> 
 
     </div> 
 
     <div class="community-title"><a href="#">Front-end Coding</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="community-row"> 
 
    <div class="community-wrap clearfix"> 
 
    <div class="community-toggle-arrow"><span class="ion-arrow-down-b"></span> 
 
    </div> 
 
    <div class="community-icon"> 
 
     <img src="assets/img/community_foothill_sm@2x.jpg" /> 
 
    </div> 
 
    <div class="community-title"><a href="#">Foothill College</a> 
 
    </div> 
 
    </div> 
 
    <div class="community-sub-row clearfix"> 
 
    <div class="community-wrap clearfix"> 
 
     <div class="community-icon"> 
 
     <img src="assets/img/community_mech_sys.png" /> 
 
     </div> 
 
     <div class="community-title"><a href="#">Mechanical Systems</a> 
 
     </div> 
 
     <div class="noti-indicator">5</div> 
 
    </div> 
 

 
    <div class="community-wrap clearfix"> 
 
     <div class="community-icon"> 
 
     <img src="assets/img/community_coding.png" /> 
 
     </div> 
 
     <div class="community-title"><a href="#">Front-end Coding</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

C'erano paio di cose mancanti nel codice della fisarmonica, che ho fissato al di sotto.

• Quando si fa clic sulla freccia, fisarmonica deve espandersi solo l'elenco corrente e non tutti, questo può essere fatto facendo riferimento ad elementi attuali genitore e poi andare a prendere l'elemento discendente .community-sub-row.
• L'elenco di fisarmonica non è stato compresso al caricamento, ma è accaduto su document.ready(), che non era buono, quindi ho aggiunto uno stile CSS per nascondere l'elenco per impostazione predefinita.
• quando si fa clic sulla fisarmonica, è necessario comprimere tutte le fisarmoniche esistenti prima di espandere quella attuale.

JS CODICE:

$(document).ready(function() { 
    $(".community-toggle-arrow").click(function() { 
    //collapse all accordion before toggling except current 
    $('.community-sub-row').not(this).slideUp(); 
    $(this).closest('.community-row').find(".community-sub-row").slideToggle(); 
    $(this).find("span").toggleClass("ion-arrow-right-b"); 
}); 
}); 

CSS:

.community-row .community-sub-row { 
    padding: 0 0 0 17px; 
    display:none; //to hide all accordion on load 
} 

Live Demo @ JSFiddle