Hi all,
I use Bootstrap Studio to design and build templates and themes for MyBB. I’m currently experiencing an issue where I’m unable to get Bootstraps ‘collapse’ function to work properly. On click, the button activates and the hidden content will show. But once I re-click the button to hide the contents, it essentially ‘jumps’ or ‘bounces’ and doesn’t close.
I’ve included the collapse code I’m using, as well as the {$headerinclude} template which is global throughout the entire site. I can’t seem to see what I’m doing wrong or whether or not MyBB’s own Javascripts are causing a conflict. I’m not at all experienced with Javascript so this is a difficult problem for me to solve.
Any and all help would be greatly appreciated. Thank you!
<div><a class="btn btn-primary" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapse-1" href="#collapse-1" role="button">Show Content</a>
<div id="collapse-1" class="collapse">
<p>Collapse content.</p>
</div>
</div>
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.js?ver=1823"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.plugins.min.js?ver=1821"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/general.js?ver=1827"></script>
<script>
$.noConflict();
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
{$avatarep_script}{$stylesheets}
<script type="text/javascript">
<!--
lang.unknown_error = "{$lang->unknown_error}";
lang.confirm_title = "{$lang->confirm_title}";
lang.expcol_collapse = "{$lang->expcol_collapse}";
lang.expcol_expand = "{$lang->expcol_expand}";
lang.select2_match = "{$lang->select2_match}";
lang.select2_matches = "{$lang->select2_matches}";
lang.select2_nomatches = "{$lang->select2_nomatches}";
lang.select2_inputtooshort_single = "{$lang->select2_inputtooshort_single}";
lang.select2_inputtooshort_plural = "{$lang->select2_inputtooshort_plural}";
lang.select2_inputtoolong_single = "{$lang->select2_inputtoolong_single}";
lang.select2_inputtoolong_plural = "{$lang->select2_inputtoolong_plural}";
lang.select2_selectiontoobig_single = "{$lang->select2_selectiontoobig_single}";
lang.select2_selectiontoobig_plural = "{$lang->select2_selectiontoobig_plural}";
lang.select2_loadmore = "{$lang->select2_loadmore}";
lang.select2_searching = "{$lang->select2_searching}";
var templates = {
modal: '{$jsTemplates['modal']}',
modal_button: '{$jsTemplates['modal_button']}'
};
var cookieDomain = "{$mybb->settings['cookiedomain']}";
var cookiePath = "{$mybb->settings['cookiepath']}";
var cookiePrefix = "{$mybb->settings['cookieprefix']}";
var cookieSecureFlag = "{$mybb->settings['cookiesecureflag']}";
var deleteevent_confirm = "{$lang->deleteevent_confirm}";
var removeattach_confirm = "{$lang->removeattach_confirm}";
var loading_text = '{$lang->ajax_loading}';
var saving_changes = '{$lang->saving_changes}';
var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
var my_post_key = "{$mybb->post_code}";
var rootpath = "{$mybb->settings['bburl']}";
var imagepath = "{$theme['imgdir']}";
var yes_confirm = "{$lang->yes}";
var no_confirm = "{$lang->no}";
var MyBBEditor = null;
var spinner_image = "{$theme['imgdir']}/spinner.gif";
var spinner = "<img src='" + spinner_image +"' alt='' />";
var modal_zindex = 9999;
// -->
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css" integrity="sha384-eoTu3+HydHRBIjnCVwsFyCpUDZHZSFKEJD0mc3ZqSBSb6YhZzRHeiomAUWCstIWo" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/fontawesome.min.css" integrity="sha384-zIaWifL2YFF1qaDiAo0JFgsmasocJ/rqu7LKYH8CoBEXqGbb9eO+Xi3s6fQhgFWM" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>