How to display certain blocks when choosing a checkbox?

Question

Hello! How can I display certain blocks when choosing a certain checkbox?
It is necessary that when you select a specific category, the rest are hidden.
For example, when selecting the "General events" category, only events having data-rubric = "1" were displayed.

$('.filter-rubric__item').change(function() { });

 .filter-rubric__list { list-style-type: none; margin: 0; padding: 5px 12px; } .filter-rubric__label span { display: none; } .filter-rubric input { display: none; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } .filter-rubric__label { color: #979797; cursor: pointer; display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.3px; padding: 9px 0 14px 0; position: relative; } .filter-rubric__item:first-child .filter-rubric__label { padding: 3px 0 14px 0; } filter-rubric__label:before { background: #fff; border: 1px solid #e8e8e8; content: ''; display: block; height: 16px; position: absolute; right: 0; top: 9px; width: 16px; } input[type="checkbox"]:checked + .filter-rubric__label span { display: block; position: absolute; right: 1px; top: 10px; } .filter-rubric__label span > svg { height: 15px; width: 16px; fill: #ff5711; } svg:not(:root) { overflow: hidden; } .timeWidth { width: 178px; } .time-message__event-info--purple { background-color: #eee5f4; } .time-message__event-info { min-height: 101px; border-radius: 5px; margin-bottom: 3px; border: 1px solid #e0e0e0; } .timeWidth { width: 178px; } .timeLeft__360min { left: 360px; } .timeLeft { position: relative; left: 0; } .time-message__event-info--blue { background-color: #a9dcf6; } .time-message__event-info { min-height: 101px; border-radius: 5px; margin-bottom: 3px; border: 1px solid #e0e0e0; } .time-message__event-info--pink { background-color: #fed5d5; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="dropdown-menu filter-rubric"> <ul class="filter-rubric__list"> <li class="filter-rubric__item"> <input type="checkbox" name="1" id="rubric-1"> <label for="rubric-1" class="filter-rubric__label">Наука<span><!--?xml version="1.0" encoding="utf-8"?--> <!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 15" style="enable-background:new 0 0 16 15;" xml:space="preserve"> <style type="text/css"> </style> <path d="M4.4,7l2.2,4c0,0,3.5-8.2,9.1-11C15.6,2,15,3.7,16,5.7c-2.4,0.5-7.5,6.4-9.1,9.3c-2.3-2.7-5-4.8-6.9-5.5L4.4,7z "></path> </svg> </span> </label> </li> <li class="filter-rubric__item"> <input type="checkbox" name="2" id="rubric-2"> <label for="rubric-2" class="filter-rubric__label">Спорт<span><!--?xml version="1.0" encoding="utf-8"?--> <!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 15" style="enable-background:new 0 0 16 15;" xml:space="preserve"> <style type="text/css"> </style> <path d="M4.4,7l2.2,4c0,0,3.5-8.2,9.1-11C15.6,2,15,3.7,16,5.7c-2.4,0.5-7.5,6.4-9.1,9.3c-2.3-2.7-5-4.8-6.9-5.5L4.4,7z "></path> </svg> </span> </label> </li> <li class="filter-rubric__item"> <input type="checkbox" name="3" id="rubric-3"> <label for="rubric-3" class="filter-rubric__label">Искусство<span><!--?xml version="1.0" encoding="utf-8"?--> <!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 15" style="enable-background:new 0 0 16 15;" xml:space="preserve"> <style type="text/css"> </style> <path d="M4.4,7l2.2,4c0,0,3.5-8.2,9.1-11C15.6,2,15,3.7,16,5.7c-2.4,0.5-7.5,6.4-9.1,9.3c-2.3-2.7-5-4.8-6.9-5.5L4.4,7z "></path> </svg> </span> </label> </li> <li class="filter-rubric__item"> <input type="checkbox" name="4" id="rubric-4"> <label for="rubric-4" class="filter-rubric__label">Общие события<span><!--?xml version="1.0" encoding="utf-8"?--> <!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 15" style="enable-background:new 0 0 16 15;" xml:space="preserve"> <style type="text/css"> </style> <path d="M4.4,7l2.2,4c0,0,3.5-8.2,9.1-11C15.6,2,15,3.7,16,5.7c-2.4,0.5-7.5,6.4-9.1,9.3c-2.3-2.7-5-4.8-6.9-5.5L4.4,7z "></path> </svg> </span> </label> </li> </ul> </div> <div data-rubric="1" class="time-message__event-info time-message__event-info--purple timeWidth"> <div class="time-message__info"> <p class="time-message__duration">07.00 - 08.00</p> <p class="time-message__name">Подъём и зарядка</p> </div> </div> <div data-rubric="2" class="time-message__event-info time-message__event-info--blue timeLeft timeLeft__360min timeWidth"> <div class="time-message__info"> <p class="time-message__duration">09.00 - 10.00</p> <p class="time-message__name">Математика и геометрия</p> <p class="time-message__description">Смена "Смена кубок", группа А.</p> <p class="time-message__location">(ауд.Менделеева)</p> </div> </div> <div data-rubric="3" class="time-message__event-info time-message__event-info--pink timeLeft timeLeft__360min timeWidth timeWidth__180min"> <div class="time-message__info"> <p class="time-message__duration">09.00 - 12.00</p> <p class="time-message__name">Мастер-класс Павла Бурре</p> <p class="time-message__description">Смена "Спортивной надежды сборной",</p> <p class="time-message__location">(стадион "Шайба")</p> </div> <div class="js-close-subevent time-message__event-in" style="display: none;"> <div class="time-message__event-info time-message__event-info--darkpink timeWidth timeWidth__30min"> <div class="time-message__info"> <p class="time-message__duration time-message__duration--sub">09.00 - 09.30</p> <p class="time-message__name time-message__name--sub">Сбор - выход</p> </div> </div> <div class="time-message__event-info time-message__event-info--darkpink timeLeft timeLeft__30min-sub timeWidth timeWidth__90min"> <div class="time-message__info"> <p class="time-message__duration time-message__duration--sub">10.00 -11.30</p> <p class="time-message__name time-message__name--sub">Мастер класс на льду</p> </div> </div> <div class="time-message__event-info time-message__event-info--darkpink timeLeft timeLeft__15min timeWidth timeWidth__15min"> <div class="time-message__info"> <p class="time-message__duration time-message__duration--sub">11.45 - 12.00</p> <p class="time-message__name time-message__name--sub">Возвра-щение</p> </div> </div> </div> <div class="js-open time-message__open-close">Развернуть подсобытия</div> </div> <div data-rubric="2" class="time-message__event-info time-message__event-info--blue timeLeft timeLeft__360min timeWidth"> <div class="time-message__info"> <p class="time-message__duration">09.00 - 10.00</p> <p class="time-message__name">Математика и геометрия</p> <p class="time-message__description">Смена "Смена кубок", группа Б.</p> <p class="time-message__location">(ауд.Менделеева)</p> </div> </div>

It is necessary that when you select a specific category, the rest are hidden.
<br> For example, when selecting the heading "General events", only events having data-rubric = "1"
@UrmuzTagizade, very stylish and modern to give links directly to GitHub: github.com/metafizzy/isotope .
And about the isotope, you came to the store to buy bread, and they tell you why you need bread, buy a sandwich right away, it is tasty and nutritious.
MasterAlex, I see you have a dude with us) Give everyone everything on a saucer.
And the analogy is just awful) Instead of breeding offtopic - it would be better for a guy with his task to help.
I shared my opinion, because I think it is right to use the most modern approaches.

Accepted Answer · 2016-04-26T09:43:13

I have got this script for the necessary functionality:

 var blocks = $('[data-rubric]'); var checkbox_items = $('.filter-rubric__item :checkbox'); $('body').on('click', '.filter-rubric__item :checkbox', function() { var name = $(this).attr('name'); if($('.filter-rubric__item :checkbox:checked').length == 1){ if($(this).prop('checked')) { blocks.hide(); $('[data-rubric='+ name +']').show(); } else { $('[data-rubric='+ name +']').hide(); } } else if($('.filter-rubric__item :checkbox:checked').length > 1) { if($(this).prop('checked')) { $('[data-rubric='+ name +']').show(); } else { $('[data-rubric='+ name +']').hide(); } } else { blocks.show(); } });

 .filter-rubric__list { list-style-type: none; margin: 0; padding: 5px 12px; } .filter-rubric__label span { display: none; } .filter-rubric input { display: none; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } .filter-rubric__label { color: #979797; cursor: pointer; display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.3px; padding: 9px 0 14px 0; position: relative; } .filter-rubric__item:first-child .filter-rubric__label { padding: 3px 0 14px 0; } filter-rubric__label:before { background: #fff; border: 1px solid #e8e8e8; content: ''; display: block; height: 16px; position: absolute; right: 0; top: 9px; width: 16px; } input[type="checkbox"]:checked + .filter-rubric__label span { display: block; position: absolute; right: 1px; top: 10px; } .filter-rubric__label span > svg { height: 15px; width: 16px; fill: #ff5711; } svg:not(:root) { overflow: hidden; } .timeWidth { width: 178px; } .time-message__event-info--purple { background-color: #eee5f4; } .time-message__event-info { min-height: 101px; border-radius: 5px; margin-bottom: 3px; border: 1px solid #e0e0e0; } .timeWidth { width: 178px; } .timeLeft__360min { left: 360px; } .timeLeft { position: relative; left: 0; } .time-message__event-info--blue { background-color: #a9dcf6; } .time-message__event-info { min-height: 101px; border-radius: 5px; margin-bottom: 3px; border: 1px solid #e0e0e0; } .time-message__event-info--pink { background-color: #fed5d5; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="dropdown-menu filter-rubric"> <ul class="filter-rubric__list"> <li class="filter-rubric__item"> <input type="checkbox" name="1" id="rubric-1"> <label for="rubric-1" class="filter-rubric__label">Наука<span><!--?xml version="1.0" encoding="utf-8"?--> <!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 15" style="enable-background:new 0 0 16 15;" xml:space="preserve"> <style type="text/css"> </style> <path d="M4.4,7l2.2,4c0,0,3.5-8.2,9.1-11C15.6,2,15,3.7,16,5.7c-2.4,0.5-7.5,6.4-9.1,9.3c-2.3-2.7-5-4.8-6.9-5.5L4.4,7z "></path> </svg> </span> </label> </li> <li class="filter-rubric__item"> <input type="checkbox" name="2" id="rubric-2"> <label for="rubric-2" class="filter-rubric__label">Спорт<span><!--?xml version="1.0" encoding="utf-8"?--> <!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 15" style="enable-background:new 0 0 16 15;" xml:space="preserve"> <style type="text/css"> </style> <path d="M4.4,7l2.2,4c0,0,3.5-8.2,9.1-11C15.6,2,15,3.7,16,5.7c-2.4,0.5-7.5,6.4-9.1,9.3c-2.3-2.7-5-4.8-6.9-5.5L4.4,7z "></path> </svg> </span> </label> </li> <li class="filter-rubric__item"> <input type="checkbox" name="3" id="rubric-3"> <label for="rubric-3" class="filter-rubric__label">Искусство<span><!--?xml version="1.0" encoding="utf-8"?--> <!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 15" style="enable-background:new 0 0 16 15;" xml:space="preserve"> <style type="text/css"> </style> <path d="M4.4,7l2.2,4c0,0,3.5-8.2,9.1-11C15.6,2,15,3.7,16,5.7c-2.4,0.5-7.5,6.4-9.1,9.3c-2.3-2.7-5-4.8-6.9-5.5L4.4,7z "></path> </svg> </span> </label> </li> <li class="filter-rubric__item"> <input type="checkbox" name="4" id="rubric-4"> <label for="rubric-4" class="filter-rubric__label">Общие события<span><!--?xml version="1.0" encoding="utf-8"?--> <!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 15" style="enable-background:new 0 0 16 15;" xml:space="preserve"> <style type="text/css"> </style> <path d="M4.4,7l2.2,4c0,0,3.5-8.2,9.1-11C15.6,2,15,3.7,16,5.7c-2.4,0.5-7.5,6.4-9.1,9.3c-2.3-2.7-5-4.8-6.9-5.5L4.4,7z "></path> </svg> </span> </label> </li> </ul> </div> <div data-rubric="1" class="time-message__event-info time-message__event-info--purple timeWidth"> <div class="time-message__info"> <p class="time-message__duration">07.00 - 08.00</p> <p class="time-message__name">Подъём и зарядка</p> </div> </div> <div data-rubric="2" class="time-message__event-info time-message__event-info--blue timeLeft timeLeft__360min timeWidth"> <div class="time-message__info"> <p class="time-message__duration">09.00 - 10.00</p> <p class="time-message__name">Математика и геометрия</p> <p class="time-message__description">Смена "Смена кубок", группа А.</p> <p class="time-message__location">(ауд.Менделеева)</p> </div> </div> <div data-rubric="3" class="time-message__event-info time-message__event-info--pink timeLeft timeLeft__360min timeWidth timeWidth__180min"> <div class="time-message__info"> <p class="time-message__duration">09.00 - 12.00</p> <p class="time-message__name">Мастер-класс Павла Бурре</p> <p class="time-message__description">Смена "Спортивной надежды сборной",</p> <p class="time-message__location">(стадион "Шайба")</p> </div> <div class="js-close-subevent time-message__event-in" style="display: none;"> <div class="time-message__event-info time-message__event-info--darkpink timeWidth timeWidth__30min"> <div class="time-message__info"> <p class="time-message__duration time-message__duration--sub">09.00 - 09.30</p> <p class="time-message__name time-message__name--sub">Сбор - выход</p> </div> </div> <div class="time-message__event-info time-message__event-info--darkpink timeLeft timeLeft__30min-sub timeWidth timeWidth__90min"> <div class="time-message__info"> <p class="time-message__duration time-message__duration--sub">10.00 -11.30</p> <p class="time-message__name time-message__name--sub">Мастер класс на льду</p> </div> </div> <div class="time-message__event-info time-message__event-info--darkpink timeLeft timeLeft__15min timeWidth timeWidth__15min"> <div class="time-message__info"> <p class="time-message__duration time-message__duration--sub">11.45 - 12.00</p> <p class="time-message__name time-message__name--sub">Возвра-щение</p> </div> </div> </div> <div class="js-open time-message__open-close">Развернуть подсобытия</div> </div> <div data-rubric="2" class="time-message__event-info time-message__event-info--blue timeLeft timeLeft__360min timeWidth"> <div class="time-message__info"> <p class="time-message__duration">09.00 - 10.00</p> <p class="time-message__name">Математика и геометрия</p> <p class="time-message__description">Смена "Смена кубок", группа Б.</p> <p class="time-message__location">(ауд.Менделеева)</p> </div> </div>

"general events" and data-rubric = "1" display do not match.
@ Jean-Claude, and maybe charging is a "science" :) but not the point, the main thing is that the script works as it should, but I think the content that the script will handle will be more
@MasterAlex why did they do it through $ ('body'). On ('click', '.filter-rubric__item: checkbox', function () why doesn’t it work through change?
@drtvader, yeah, I also thought about it, but I didn’t fix it anymore, because this option also has the right to life.
it seems to work and, probably, it will be more correct to use the 'change' function, which will monitor the state of the checkbox :)

Answer 2 · 2016-04-26T09:43:33

Pardon for homosexual approach. The author of the question does not match the name data- with the data- charging unit, corrected. Or I do not understand how this relates to general events.

 $(function() { $(':checkbox').on('change', function() { $(':checkbox').each(function(index, el) { var val = parseInt(($(this).attr('name'))); if ($(el).prop('checked')) { $('.time-message__event-info').filter('div[data-rubric=' + val + ']').show(); } else { $('.time-message__event-info').filter('div[data-rubric=' + val + ']').hide(); } }); if ($('.filter-rubric__item :checkbox:checked').length == 0) { $('.time-message__event-info').show('fast'); } }); });

 .filter-rubric__list { list-style-type: none; margin: 0; padding: 5px 12px; } .filter-rubric__label span { display: none; } .filter-rubric input { display: none; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } .filter-rubric__label { color: #979797; cursor: pointer; display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.3px; padding: 9px 0 14px 0; position: relative; } .filter-rubric__item:first-child .filter-rubric__label { padding: 3px 0 14px 0; } .filter-rubric__label:before { background: #fff; border: 1px solid #e8e8e8; content: ''; display: block; height: 16px; position: absolute; right: 0; top: 9px; width: 16px; } input[type="checkbox"]:checked + .filter-rubric__label span { display: block; position: absolute; right: 1px; top: 10px; } .filter-rubric__label span > svg { height: 15px; width: 16px; fill: #ff5711; } svg:not(:root) { overflow: hidden; } .timeWidth { width: 178px; } .time-message__event-info--purple { background-color: #eee5f4; } .time-message__event-info { min-height: 101px; border-radius: 5px; margin-bottom: 3px; border: 1px solid #e0e0e0; } .timeWidth { width: 178px; } .timeLeft__360min { left: 360px; } .timeLeft { position: relative; left: 0; } .time-message__event-info--blue { background-color: #a9dcf6; } .time-message__event-info { min-height: 101px; border-radius: 5px; margin-bottom: 3px; border: 1px solid #e0e0e0; } .time-message__event-info--pink { background-color: #fed5d5; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="dropdown-menu filter-rubric"> <ul class="filter-rubric__list"> <li class="filter-rubric__item"> <input type="checkbox" name="100" id="rubric-100"> <label for="rubric-100" class="filter-rubric__label">Наука<span><!--?xml version="1.0" encoding="utf-8"?--> <!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 15" style="enable-background:new 0 0 16 15;" xml:space="preserve"> <style type="text/css"> </style> <path d="M4.4,7l2.2,4c0,0,3.5-8.2,9.1-11C15.6,2,15,3.7,16,5.7c-2.4,0.5-7.5,6.4-9.1,9.3c-2.3-2.7-5-4.8-6.9-5.5L4.4,7z "></path> </svg> </span> </label> </li> <li class="filter-rubric__item"> <input type="checkbox" name="2" id="rubric-2"> <label for="rubric-2" class="filter-rubric__label">Спорт<span><!--?xml version="1.0" encoding="utf-8"?--> <!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 15" style="enable-background:new 0 0 16 15;" xml:space="preserve"> <style type="text/css"> </style> <path d="M4.4,7l2.2,4c0,0,3.5-8.2,9.1-11C15.6,2,15,3.7,16,5.7c-2.4,0.5-7.5,6.4-9.1,9.3c-2.3-2.7-5-4.8-6.9-5.5L4.4,7z "></path> </svg> </span> </label> </li> <li class="filter-rubric__item"> <input type="checkbox" name="3" id="rubric-3"> <label for="rubric-3" class="filter-rubric__label">Искусство<span><!--?xml version="1.0" encoding="utf-8"?--> <!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 15" style="enable-background:new 0 0 16 15;" xml:space="preserve"> <style type="text/css"> </style> <path d="M4.4,7l2.2,4c0,0,3.5-8.2,9.1-11C15.6,2,15,3.7,16,5.7c-2.4,0.5-7.5,6.4-9.1,9.3c-2.3-2.7-5-4.8-6.9-5.5L4.4,7z "></path> </svg> </span> </label> </li> <li class="filter-rubric__item"> <input type="checkbox" name="1" id="rubric-1"> <label for="rubric-1" class="filter-rubric__label">Общие события<span><!--?xml version="1.0" encoding="utf-8"?--> <!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 15" style="enable-background:new 0 0 16 15;" xml:space="preserve"> <style type="text/css"> </style> <path d="M4.4,7l2.2,4c0,0,3.5-8.2,9.1-11C15.6,2,15,3.7,16,5.7c-2.4,0.5-7.5,6.4-9.1,9.3c-2.3-2.7-5-4.8-6.9-5.5L4.4,7z "></path> </svg> </span> </label> </li> </ul> </div> <div data-rubric="1" class="time-message__event-info time-message__event-info--purple timeWidth"> <div class="time-message__info"> <p class="time-message__duration">07.00 - 08.00</p> <p class="time-message__name">Подъём и зарядка</p> </div> </div> <div data-rubric="2" class="time-message__event-info time-message__event-info--blue timeLeft timeLeft__360min timeWidth"> <div class="time-message__info"> <p class="time-message__duration">09.00 - 10.00</p> <p class="time-message__name">Математика и геометрия</p> <p class="time-message__description">Смена "Смена кубок", группа А.</p> <p class="time-message__location">(ауд.Менделеева)</p> </div> </div> <div data-rubric="3" class="time-message__event-info time-message__event-info--pink timeLeft timeLeft__360min timeWidth timeWidth__180min"> <div class="time-message__info"> <p class="time-message__duration">09.00 - 12.00</p> <p class="time-message__name">Мастер-класс Павла Бурре</p> <p class="time-message__description">Смена "Спортивной надежды сборной",</p> <p class="time-message__location">(стадион "Шайба")</p> </div> </div> <div data-rubric="2" class="time-message__event-info time-message__event-info--blue timeLeft timeLeft__360min timeWidth"> <div class="time-message__info"> <p class="time-message__duration">09.00 - 10.00</p> <p class="time-message__name">Математика и геометрия</p> <p class="time-message__description">Смена "Смена кубок", группа Б.</p> <p class="time-message__location">(ауд.Менделеева)</p> </div> </div>

Answer 3 · 2016-04-26T07:07:40

If I understand you correctly then you can somehow

 $('.filter-rubric__item input').change(function() { var ids = $(this).attr('name'); var blocks = $('hidden__block'); blocks.hide(); var block = $('[data-rubric=' + ids +']'); block.show(); });

For the blocks, you first prescribe styles so that they are not displayed. html

 <div class="hidden__block" id="b1">...</div> <div class="hidden__block" id="b2">...</div> ... <div class="hidden__block" id="b...">...</div>

css

 .hidden__block{ display: none;}

Initially, all blocks are visible, and when you make a choice, all non-rubric blocks are hidden.
@Alexandr Trubachov, and why not implant your code into the code of the author of the question, because it is simpler than giving abstract code, which also cannot be viewed and clicked on.
@MasterAlex - it can be done this way, but then the author will not make sense to understand how it works, he will just copy everything.
@AlexandrTrubachov if several checkboxes are selected, the corresponding blocks are displayed.

How to display certain blocks when choosing a checkbox?

3 answers 3

More articles: