A short time ago, I try to write a small fragment on bootstrap-select lib, which should open and hide some additional options when clicking / changing an event on the parent parameter (half this in the bottom example).
How it should work ...
When a user clicks on a specific option item, some additional items with additional information are displayed below the parent. When the user clicks one more time, additional elements must be hidden, and child elements are cleared of already selected parameters.
What is the problem?
Unfortunately, my jquery level is small, so for now I only have / show / functionality without / hiding / children and clearing the selected ones (if some child of a reserved parent was selected). And it will be great if the marked arrow on the parent element is not displayed, only on the child.
My example
This is my shortcode -
$('.remove-example').find('.hider').hide(); $('.selectpicker').change(function() { var feta = $(this).find("option:selected:first").attr('id'); var feta1 = $(this).find("option:selected:last").attr('id'); $('.remove-example').find('.' + feta).show(); $('.remove-example').find('.' + feta1).show(); $('.remove-example').selectpicker('refresh'); }); $('.rm-mustard').click(function() { $('.remove-example').find('.Mustard').hide(); $('.remove-example').selectpicker('refresh'); }); $('.rm-mustard1').click(function() { $('.remove-example').find('.Mustard').show(); $('.remove-example').selectpicker('refresh'); }); $('.selectpicker').selectpicker();
.btn-primary { padding: 0px 74px; margin-top: 5px; } #tastes { margin: 15px 0px 0px 15px; } .padd { margin-left:20px; } }
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script> <link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/> <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/> <select class="selectpicker remove-example" multiple> <option id="Mustard" value="">Mustard</option> <option data-subtext="50g" class="Mustard hider padd">Mustard2</option> <option data-subtext="1kg" class="Mustard hider padd">Mustard3</option> <option id="Ketchup">Ketchup</option> <option data-subtext="50g" class="Ketchup hider padd">Ketchup2</option> <option data-subtext="1kg" class="Ketchup hider padd">Ketchup3</option> <option value="Relish">Relish</option> </select> <button class="btn btn-success rm-mustard1">Show Mustard</button> <button class="btn btn-warning rm-mustard">Remove again</button>
http://jsfiddle.net/k0r974b7/
Parent: Mustard / Ketchup
Child: Mustard1, Mustard2 / Ketchup1, Ketchup2
source share