I want users to be able to check the checkbox without closing the accordion body.
I have tried to stop propagation however, I was unable to get this to work.
I'm using the MaterializeCSS framework however, it doesn't provide any options to override this behavior.
body {
margin: 0;
padding: 0;
}
.collapsible-header {
position: relative;
}
.test {
position: absolute;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First
<span class="test">
<input id="demo-1" name="demo-1" type="checkbox">
<label for="demo-1"></label>
</span>
</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Second
<span class="test">
<input id="demo-2" name="demo-2" type="checkbox">
<label for="demo-2"></label>
</span>
</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Third
<span class="test">
<input id="demo-3" name="demo-3" type="checkbox">
<label for="demo-3"></label>
</span>
</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
</ul>
Any ideas?
That is simple: simply stop the click event from propagating from the input group (using event.stopPropagation
), which has the class of test
in your example:
$(function() {
$('.collapsible .test').on('click', function(e) {
e.stopPropagation();
});
});
body {
margin: 0;
padding: 0;
}
.collapsible-header {
position: relative;
}
.test {
position: absolute;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First
<span class="test">
<input id="demo-1" name="demo-1" type="checkbox">
<label for="demo-1"></label>
</span>
</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Second
<span class="test">
<input id="demo-2" name="demo-2" type="checkbox">
<label for="demo-2"></label>
</span>
</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Third
<span class="test">
<input id="demo-3" name="demo-3" type="checkbox">
<label for="demo-3"></label>
</span>
</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
</ul>