I have a webite based on bootstrap and I'm copying in html, css, and javascript from demo code which generates a 'Horizontal Generalogy Treeview'. The tree displays fine, but I just can't get the javascript that should display/hide parts of the tree when clicked to work. This is how I've added the javascript at the end of the page. What am I doing wrong?
Thanks for any help.
Thanks for any help.
JavaScript:
<!-- JavaScript for tree-->
<script type="application/javascript">
$(function () {
$('.genealogy-tree ul').hide();
$('.genealogy-tree>ul').show();
$('.genealogy-tree ul.active').show();
$('.genealogy-tree li').on('click', function (e) {
var children = $(this).find('> ul');
if (children.is(":visible")) children.hide('fast').removeClass('active');
else children.show('fast').addClass('active');
e.stopPropagation();
});
});
</script>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="../js/scripts.js"></script>
</body>