How to write the function of clicking different elements without duplicating it

Question

$(".summary_1").click(function(){ if ($("#hotel-facilities").is(":hidden")) { $("#hotel-facilities").slideDown("slow"); $(".summary_1").addClass("open"); } else { $("#hotel-facilities").hide("slow"); $(".summary_1").removeClass("open"); } }); $(".summary_2").click(function(){ if ($("#lodging_type").is(":hidden")) { $("#lodging_type").slideDown("slow"); $(".summary_2").addClass("open"); } else { $("#lodging_type").hide("slow"); $(".summary_2").removeClass("open"); } });

 .details { border-top: 1px solid #cdd0d2; border-bottom: 0; cursor: pointer; } .tab_content { display: none; position: relative; border-bottom: 1px solid #cdd0d2; width: 250px; user-select: none; outline: 0; } .is-hidden { display: none; } .summary_1, .summary_2 { font-size: 14px; padding: 14px 40px; position: relative; list-style-type: none; margin: 0; font-weight: 400; } .summary_1:before { /*-webkit-transform: translate(-50%,-50%) rotate(0);*/ transform: translate(-50%,-50%) rotate(-90deg); will-change: translate,rotate; } .summary_2:before { /*-webkit-transform: translate(-50%,-50%) rotate(0);*/ transform: translate(-50%,-50%) rotate(-90deg); will-change: translate,rotate; } .summary_1:after { transform: translate(-50%,-50%); will-change: translate,opacity; } .summary_2:after { transform: translate(-50%,-50%); will-change: translate,opacity; } .summary_1.open:before{ /* добавочный класс */ transform:translate(-50%,-50%) rotate(-0deg); width:0; } .summary_2.open:before{ /* добавочный класс */ transform:translate(-50%,-50%) rotate(-0deg); width:0; } .summary_1:after, .summary_1:before { content: ""; width: 14px; height: 2px; border-radius: 2px; background-color: #37454d; display: block; position: absolute; top: 50%; transition: all .2s ease-in-out; opacity: 1; left: 21px; contain: strict; } .summary_2:after, .summary_2:before { content: ""; width: 14px; height: 2px; border-radius: 2px; background-color: #37454d; display: block; position: absolute; top: 50%; transition: all .2s ease-in-out; opacity: 1; left: 21px; contain: strict; } .summary_1, .summary_2:hover { background: #ebeced; cursor: pointer; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="details"> <h4 class="summary_1" role="tab" aria-expanded="false" aria-owns="hotel-facilities" aria-controls="hotel-facilities" tabindex="0">Hotel facilities</h4> <div id="hotel-facilities" class="is-hidden"> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox"> <span class="label">24-hour reception (4923)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox"> <span class="label">24-hour room service (286)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox"> <span class="label">Airport shuttle (602)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox"> <span class="label">Beach umbrellas (2094)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox"> <span class="label">Bungalows (152)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox"> <span class="label">Business center (3052)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox"> <span class="label">Casino (113)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox"> <span class="label">Concierge (2187)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox"> <span class="label">Conference rooms (2659)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox"> <span class="label">Convenience store (1219)</span> </label> </div> </div> </section> <section class="details"> <h4 class="summary_2" role="tab" aria-expanded="false" aria-owns="hotel-facilities" aria-controls="hotel-facilities" tabindex="0">Type of lodging</h4> <div id="lodging_type" class="is-hidden"> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox"> <span class="label">Bed & Breakfast (427)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox"> <span class="label">Camping Site (27)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox"> <span class="label">Hostel (121)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox"> <span class="label">Hotel (8967)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox"> <span class="label">Motel (816)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox"> <span class="label">Pension (243)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox"> <span class="label">Serviced Apartment (493)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox"> <span class="label">Vacation Home (3417)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox"> <span class="label">Vacation Rental (11847)</span> </label> </div> </div> </section>

Hello everyone, there are 2 blocks and when they are clicked, they open. For each block I wrote my class and my identifier. I need to unite these blocks like that. To avoid duplicate code. Why? Because the site will have 9 such blocks and write for each summary_1, summary_2, summary_3, summary_4 ,summary_5 , etc. and give your style incorrectly so that there is a single class a single identifier if it is impossible that the code is not duplicated. And everything was written elegantly and correctly.

off topic: pay attention to markup. id repeated many times. It should not be. - Kirill Korushkin
Ah yes, I missed that part. Thanks @Kirill Korushkin - Excess Suslik

Accepted Answer · 2017-12-23T07:29:05

If you yourself see that the classes are the same, and the logic of the work is the same, then leave one class and that's it.

 $(".summary").click(function(){ var acSel = '#' + $(this).attr('aria-controls'); // можно так, если исходная анимация не нужна в точности // $(acSel).slideToggle('slow'); // или как в вопросе if ($(acSel).is(":hidden")) { $(acSel).slideDown("slow"); } else { $(acSel).hide("slow"); } $(this).toggleClass("open"); });

 .details { border-top: 1px solid #cdd0d2; border-bottom: 0; cursor: pointer; } .tab_content { display: none; position: relative; border-bottom: 1px solid #cdd0d2; width: 250px; user-select: none; outline: 0; } .is-hidden { display: none; } .summary { font-size: 14px; padding: 14px 40px; position: relative; list-style-type: none; margin: 0; font-weight: 400; } .summary:before { /*-webkit-transform: translate(-50%,-50%) rotate(0);*/ transform: translate(-50%,-50%) rotate(-90deg); will-change: translate,rotate; } .summary:after { transform: translate(-50%,-50%); will-change: translate,opacity; } .summary.open:before{ /* добавочный класс */ transform:translate(-50%,-50%) rotate(-0deg); width:0; } .summary:after, .summary:before { content: ""; width: 14px; height: 2px; border-radius: 2px; background-color: #37454d; display: block; position: absolute; top: 50%; transition: all .2s ease-in-out; opacity: 1; left: 21px; contain: strict; } .summary:hover { background: #ebeced; cursor: pointer; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="details"> <h4 class="summary" role="tab" aria-expanded="false" aria-owns="hotel-facilities" aria-controls="hotel-facilities" tabindex="0">Hotel facilities</h4> <div id="hotel-facilities" class="is-hidden"> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox"> <span class="label">24-hour reception (4923)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox"> <span class="label">24-hour room service (286)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox"> <span class="label">Airport shuttle (602)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox"> <span class="label">Beach umbrellas (2094)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox"> <span class="label">Bungalows (152)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox"> <span class="label">Business center (3052)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox"> <span class="label">Casino (113)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox"> <span class="label">Concierge (2187)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox"> <span class="label">Conference rooms (2659)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox"> <span class="label">Convenience store (1219)</span> </label> </div> </div> </section> <section class="details"> <h4 class="summary" role="tab" aria-expanded="false" aria-owns="lodging-type" aria-controls="lodging_type" tabindex="0">Type of lodging</h4> <div id="lodging_type" class="is-hidden"> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox"> <span class="label">Bed & Breakfast (427)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox"> <span class="label">Camping Site (27)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox"> <span class="label">Hostel (121)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox"> <span class="label">Hotel (8967)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox"> <span class="label">Motel (816)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox"> <span class="label">Pension (243)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox"> <span class="label">Serviced Apartment (493)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox"> <span class="label">Vacation Home (3417)</span> </label> </div> <div role="treeitem" aria-selected="false"> <label class="checkbox-container grouped"> <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox"> <span class="label">Vacation Rental (11847)</span> </label> </div> </div> </section>

Thank you very much @teran. The problem was that when there was one class at the click, both windows opened, so I could not perform this task myself.
@teran let me add: the whole if in the click event can be replaced by $ (acSel) .toggle ("slow");
@KirillKorushkin does toggle and slideToggle show the same exit animation from above?
but in general, yes, of course, you can replace it with toggle, if it doesn’t matter to the author
@KirillKorushkin did not ask about that, of course, he meant hide and toggle .

How to write the function of clicking different elements without duplicating it

1 answer 1

More articles: