Wie animiert man mehrere Elemente, wenn man dieselben Klassen verwendet?

Question

Ich versuche mehrere Kästchen zu machen, die sich beim Klicken auf das X erweitern und wieder schließen lassen. Zunächst einmal funktioniert die enge Frage nicht, aber das ist nicht die Hauptsache, nach der ich suche , wie kann ich den Code optimieren, so wird nicht 400-600 hundert Zeilen der gleichen, nur für jede Box/Element.

Wenn man auf eine Box/Element klickt, sollte es sich erweitern und so sollte der Inhalt drin sein - in der Reihenfolge wie sie kommen. Dann kann es wieder geschlossen werden und Sie könnten auf ein anderes Element mit dem gleichen Ergebnis klicken - mit dem gleichen Code. Wie kann ich der Site mitteilen, auf welches Element ich geklickt habe?

Vielen Dank im Voraus :)

$(document).ready(function(){ 
 
    $(".calendarBox").click(function() { 
 
    $(".calendarBox").addClass("calendarBoxOpen").delay(2000); 
 
    \t $(".dateTitle").addClass("dateTitleOpen"); 
 
    $(".dateMonthBox").addClass("dateMonthBoxOpen"); 
 
    $(".closeMonth").addClass("showMonth"); 
 
    $(".dateDayBox").addClass("dateDayBoxOpen"); 
 
    $(".closeDay").addClass("showDay"); 
 
    $(".dateCloseBtnBox").addClass("dateOpenBtnBox"); 
 
    $(".closeHr").addClass("showHr"); 
 
    $(".dayActivitiesInfo").addClass("dayActivitiesInfoOpned"); 
 
    $(".dayInfoTxt_1May").addClass("dayInfoTxt_1MayOpen"); 
 
    $(".dayInfoBtnBox_1Maj").addClass("dayInfoBtnBox_1MajOpen"); 
 
    }); 
 
}); 
 

 
$(document).ready(function(){ 
 
    $(".dateCloseBtn").click(function() {  \t \t \t 
 
    \t $(".dayInfoBtnBox_1Maj").removeClass("dayInfoBtnBox_1MajOpen"); 
 
    \t $(".dayInfoTxt_1May").removeClass("dayInfoTxt_1MayOpen"); 
 
    $(".dayActivitiesInfo").removeClass("dayActivitiesInfoOpned"); 
 
    $(".closeHr").removeClass("showHr"); 
 
    $(".dateCloseBtnBox").removeClass("dateOpenBtnBox"); 
 
    $(".closeDay").removeClass("showDay"); 
 
    $(".dateDayBox").removeClass("dateDayBoxOpen"); 
 
    $(".closeMonth").removeClass("showMonth"); 
 
    $(".dateMonthBox").removeClass("dateMonthBoxOpen"); 
 
    $(".dateTitle").removeClass("dateTitleOpen"); 
 
    $(".calendarBox").removeClass("calendarBoxOpen"); 
 
    }); 
 
});

.calendarBox { /*This is when closed*/ 
 
    width:14.28571428571428%; 
 
    border:0.5px solid #000; 
 
    height:100%; 
 
    transition-duration:1s; 
 
} 
 

 
.calendarBox:hover { 
 
    background-color:#8abcc2; 
 
} 
 

 
.calendarBoxOpen { /*This is when opened*/ 
 
    width:57.14285714285712%; 
 
} 
 

 
.calendarDate { 
 
    
 
} 
 

 
.calendarHeader { 
 
    display:flex; 
 
} 
 

 
.dateTitle { /*This is when closed*/ 
 
    margin-left:15px; 
 
    display:none; 
 
    transition:ease-in-out; 
 
    transition-duration:1s; 
 
} 
 

 
.dateTitleOpen { /*This is when opened*/ 
 
    display:block; 
 
    
 
} 
 

 
.dateDayMonthBox { 
 
    width:100%; 
 
} 
 

 
.dateMonthBox { /*This is when closed*/ 
 
    display:inline-flex; 
 
    float:right; 
 
} 
 

 
.dateMonthBoxOpen { /*This is when Opened*/ 
 
    margin-left:25px; 
 
} 
 

 
.closeMonth { /*This is when closed*/ 
 
    display:none; 
 
} 
 

 
.showMonth { /*This is when opened*/ 
 
    display:block; 
 
} 
 

 
.dateDayBox { /*This is when closed*/ 
 
    display:inline-flex; 
 
    float:left;/*This is when open*/ 
 
} 
 

 
.dateDayBoxOpen { /*This is when opened*/ 
 
    float:right; 
 
} 
 

 
.closeDay { /*This is when closed*/ 
 
    display:none; 
 
} 
 

 
.showDay { /*This is when opened*/ 
 
    display:block; 
 
} 
 

 
.dateCloseBtnBox { /*This is when date is closed*/ 
 
    -webkit-margin-before: 1.33em; 
 
    -webkit-margin-after: 1.33em; 
 
    -webkit-margin-start: 0px; 
 
    -webkit-margin-end: 0px; 
 
    font-weight: bold; 
 
    margin-left:25px; 
 
    margin-right:5px; 
 
    display:none; 
 
} 
 

 
.dateOpenBtnBox { /*This is visible, when date open*/ 
 
    display:block; 
 
} 
 

 
.dateCloseBtn { 
 

 
} 
 

 
.closeHr { /*This is when closed*/ 
 
    display:none; 
 
} 
 

 
.showHr { /*This is when opened*/ 
 
    display:block; 
 
} 
 

 
/*====Content of the calendar day=====*/ 
 

 
.dateDayInformationBox { 
 
    
 
} 
 

 
.dateDayInformation { 
 
    width:100%; 
 
    display:inline-flex; 
 
    overflow-y:hidden; 
 
} 
 

 
.dayActivitiesInfo { /*This is when closed*/ 
 
    height:18px; 
 
    width:100%; 
 
    margin-left: 15px; 
 
    padding-left: 10px; 
 
    list-style-type:none; 
 
    border-left:2.5px solid purple; 
 
} 
 

 
.dayActivitiesInfoOpned { /*This is when opened*/ 
 
    height:100%; 
 
    width:50%; 
 
    margin-left: 15px; 
 
    padding-left: 10px; 
 
    list-style-type:none; 
 
    border-left:2.5px solid purple; 
 
} 
 

 
/*====The txt======*/ 
 

 
.dayInfoTitel_1May { 
 
    
 
} 
 

 
.dayInfoTxt_1May { /*This is when closed*/ 
 
    display:none; 
 
} 
 

 
.dayInfoTxt_1MayOpen { /*This is when opened*/ 
 
    display:block; 
 
} 
 

 
.dayInfoBtnBox_1Maj { /*This is when closed*/ 
 
    display:none; 
 
} 
 

 
.dayInfoBtnBox_1MajOpen { /*This is when opened*/ 
 
    text-align: center; 
 
    margin: auto; 
 
    display:block; 
 
}

<script src="http://code.jquery.com/jquery.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    
 
<div class="calendarBox"> 
 
    <div class="calendarDate"> 
 
    <div class="calendarHeader"> 
 
     <h3 class="dateTitle">Information</h3> 
 
     <div class="dateDayMonthBox">   
 
      <div class="dateMonthBox"><h4 class="">1</h4><h4 class="closeMonth">.Maj</h4></div>   <div class="dateDayBox"><h4 class="">M</h4><h4 class="closeDay">andag</h4></div> 
 
     </div>  
 
     <div class="dateCloseBtnBox"> 
 
     <div class="dateCloseBtn">close</div> 
 
     </div><!--The clouse btn-->  
 
    </div> 
 
    <hr class="closeHr"> 
 
    <div class="dateDayInformationBox"> 
 
     <div class="dateDayInformation"> 
 
     <ul class="dayActivitiesInfo"> 
 
      <li class="dayInfoTitel_1May">Børnekor - kl.14:40</li> 
 
      <li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li> 
 
     </ul> 
 
     <div class="dayInfoBtnBox_1Maj"> 
 
      <h5>Tilmeldte 23 <span>Icon</span></h5> 
 
      <div> 
 
      <button>Del</button> 
 
      <button>Tilmeld</button> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="dateDayInformation"> 
 
     <ul class="dayActivitiesInfo"> 
 
      <li class="dayInfoTitel_1May">Bord og Vin - kl.18:30</li> 
 
      <li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li> 
 
     </ul> 
 
     <div class="dayInfoBtnBox_1Maj"> 
 
      <h5>Tilmeldte 23 <span>Icon</span></h5> 
 
      <div> 
 
      <button>Del</button> 
 
      <button>Tilmeld</button> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<!---------><div class="close"> 
 
close 
 
</div> 
 

 

 
<div class="calendarBox" onclick="animateDayOpen_1Maj"> 
 
    <div class="calendarDate"> 
 
    <div class="calendarHeader"> 
 
     <h3 class="dateTitle">Information</h3> 
 
     <div class="dateDayMonthBox">   
 
      <div class="dateMonthBox"><h4 class="">2</h4><h4 class="closeMonth">.Maj</h4></div>   <div class="dateDayBox"><h4 class="">M</h4><h4 class="closeDay">andag</h4></div> 
 
     </div>  
 
     <div class="dateCloseBtnBox" onclick="animateDayClose_1Maj"> 
 
     <div class="dateCloseBtn">X</div> 
 
     </div><!--The clouse btn-->  
 
    </div> 
 
    <hr class="closeHr"> 
 
    <div class="dateDayInformationBox"> 
 
     <div class="dateDayInformation"> 
 
     <ul class="dayActivitiesInfo"> 
 
      <li class="dayInfoTitel_1May">Børnekor - kl.14:40</li> 
 
      <li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li> 
 
     </ul> 
 
     <div class="dayInfoBtnBox_1Maj"> 
 
      <h5>Tilmeldte 23 <span>Icon</span></h5> 
 
      <div> 
 
      <button>Del</button> 
 
      <button>Tilmeld</button> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="dateDayInformation"> 
 
     <ul class="dayActivitiesInfo"> 
 
      <li class="dayInfoTitel_1May">Bord og Vin - kl.18:30</li> 
 
      <li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li> 
 
     </ul> 
 
     <div class="dayInfoBtnBox_1Maj"> 
 
      <h5>Tilmeldte 23 <span>Icon</span></h5> 
 
      <div> 
 
      <button>Del</button> 
 
      <button>Tilmeld</button> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Also, Sie haben mehrere Boxen, die Sie auf Klick erweitern/verkleinern. Sie können alle diese Boxen eine Klasse geben - boxExpandable für Beispiel mit Anfangsbreite. Dann Klickt Benutzer auf boxExpandable - Sie sollten .expanded Klasse mit höherer Breite wechseln.
Wenn Sie möchten, dass Inhalte nur angezeigt werden, wenn die Box erweitert ist, geben Sie sie in die Klasse .showWhenExpanded ein, wie unten gezeigt.

$(document).ready(function(){ 
 
    $('.expandableBox').on('click', function(){ 
 
    $(this).toggleClass('expanded'); 
 
    }); 
 
});

.box { 
 
    margin-bottom: 10px; 
 
    padding: 15px; 
 
    width: 40%; 
 
    border: solid 5px goldenrod; 
 
    transition: background-color .4s, width .4s; 
 
} 
 

 
.box:hover { 
 
    background-color: #32cd32; 
 
} 
 

 
.box.expanded { 
 
    width: 80%; 
 
} 
 

 
.showWhenExpanded { 
 
    display: none; 
 
} 
 

 
.box.expanded .showWhenExpanded { 
 
    display: inline-block;  
 
}

<script src="//code.jquery.com/jquery.js"></script> 
 

 
<div class="content"> 
 
    <div class="box expandableBox"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p> 
 
    </div> 
 
    <div class="box expandableBox"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p> 
 
    </div> 
 
    <div class="box expandableBox"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p> 
 
    </div> 
 
</div>

Siehe this codepen